# Fumadocs (Framework Mode, TanStack Start): createAsyncAPI()
URL: /ja/docs/tanstack-start/integrations/asyncapi/server
Source: https://raw.githubusercontent.com/fuma-nama/fumadocs/refs/heads/main/apps/docs/content/docs/(framework)/[framework]/integrations/asyncapi/server.ja.mdx

AsyncAPI のサーバーインスタンスです。

## AsyncAPI Server [#asyncapi-server]

Fumadocs AsyncAPI のメイン設定です。

> ブラウザ環境では参照しないでください。

### `input` [#input]

読み込む AsyncAPI スキーマです。

* ファイルパス
* 外部 URL
* 関数(後述)

読み込めるのはここに列挙したスキーマのみです。それ以外の ID を `getSchema()` に渡したり、ページでプリロードしたりするとエラーがスローされます。

<Callout type="warn">
信頼できないスキーマを `input` に渡さないでください。スキーマ内の `$ref` によって、ローカルファイルの読み取りや、プライベートホストを含む任意の URL へのフェッチが行われる可能性があります。
</Callout>

```ts tab="Basic"
import { createAsyncAPI } from '@fumadocs/asyncapi/server';

export const asyncapi = createAsyncAPI({
  input: ['./streetlights.yaml'],
});
```

```ts tab="Functions"
import { createAsyncAPI } from '@fumadocs/asyncapi/server';

export const asyncapi = createAsyncAPI({
  input: {
    // [id]: ダウンロードした AsyncAPI スキーマ
    galaxy: async () => {
      const res = await fetch('https://example.com/asyncapi.yaml');
      return res.text();
    },
  },
});
```

### `disableCache` [#disablecache]

読み込んだスキーマのキャッシュを無効にします。スキーマを頻繁に変更する開発時に便利です。

```ts
import { createAsyncAPI } from '@fumadocs/asyncapi/server';

export const asyncapi = createAsyncAPI({
  input: ['./asyncapi.yaml'],
  disableCache: true,
});
```

## ドキュメントを一度だけ読み込む [#loading-documents-once]

ページは props としてドキュメント全体を受け取るため、ページの読み込み、ナビゲーション、プリフェッチのたびにドキュメントが毎回送信されます。大きなドキュメントの場合は、props に含めないようにしてください。

```ts title="lib/asyncapi.ts"
import { createAsyncAPI } from '@fumadocs/asyncapi/server';

export const asyncapi = createAsyncAPI({
  // ID は URL に含まれるため、URL セーフにしてください
  input: { streetlights: './streetlights.yaml' },
  includeDocument: false, // [!code ++]
});
```

TanStack Start のルートローダーはサーバーとブラウザの両方で実行されるため、docs ルートでは `loadDocument` を使わずにドキュメントを読み込めます。サーバー関数は、ブラウザがまだドキュメントを保持していない場合にのみ呼び出してください。

```tsx title="src/routes/docs/$.tsx"
import { createServerFn } from '@tanstack/react-start';
import type { AsyncAPI } from '@fumadocs/asyncapi';
import { asyncapi } from '@/lib/asyncapi';

// ブラウザで読み込み済みのドキュメント
const documents = new Map<string, AsyncAPI.AsyncAPIObject>();

const getDocument = createServerFn({ method: 'GET' })
  .validator((id: string) => id)
  .handler(async ({ data: id }) => (await asyncapi.getSchema(id)).bundled);

export const Route = createFileRoute('/docs/$')({
  component: Page,
  loader: async ({ params }) => {
    const data = await serverLoader({ data: params._splat?.split('/') ?? [] });
    if (data.type === 'asyncapi') {
      const { document: id, payload } = data.props;
      payload.bundled = documents.get(id) ?? (await getDocument({ data: id }));
    }
    return data;
  },
});

function Page() {
  const page = useFumadocsLoader(Route.useLoaderData());
  // 最初のページのドキュメントも保持する
  if (page.type === 'asyncapi' && typeof window !== 'undefined')
    documents.set(page.props.document, page.props.payload.bundled!);
  // ...
}
```

* 生成された MDX ファイルを使用する場合は、代わりにドキュメントを `preloaded.docs` に配置してください。
* ブラウザは各ドキュメントをリロードまで保持します。[`disableCache`](#disablecache) を使用する場合は、`includeDocument` を有効にしたままにしてください。