# Fumadocs (Framework Mode, Waku): createAsyncAPI()
URL: /ja/docs/waku/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 ++]
});
```

`loadDocument` を渡すと、各ドキュメントの読み込みがブラウザセッションごとに1回だけになります。この関数はサーバーレンダリング時にも実行されます。

```tsx title="components/api-page.tsx"
'use client';
import { preload } from 'react-dom';
import { createAsyncAPIPage } from '@fumadocs/asyncapi/ui';

export const AsyncAPIPage = createAsyncAPIPage({
  async loadDocument(id) {
    if (import.meta.env.SSR) {
      // ブラウザがページと同時にダウンロードを開始する
      preload(`/api/asyncapi/${id}`, { as: 'fetch', crossOrigin: 'anonymous' });
      const { asyncapi } = await import('@/lib/asyncapi');
      return (await asyncapi.getSchema(id)).bundled;
    }
    return (await fetch(`/api/asyncapi/${id}`)).json();
  },
});
```

ルートを用意して、ブラウザにドキュメントを配信します。

```ts title="src/pages/_api/api/asyncapi/[id].ts"
import type { ApiContext } from 'waku/router';
import { asyncapi } from '@/lib/asyncapi';

export async function GET(_: Request, { params }: ApiContext<'/api/asyncapi/[id]'>) {
  return Response.json((await asyncapi.getSchema(params.id)).bundled);
}
```

* `loadDocument` は生成された MDX ファイルでも使用できます。
* [Fumadocs CLI でインストールした UI](/docs/waku/integrations/asyncapi/api-page#full-ui) の場合は、`loadDocument` を `createAsyncAPIRenderer()` に渡してください。
* ブラウザは各ドキュメントをリロードまで保持します。[`disableCache`](#disablecache) を使用する場合は、`includeDocument` を有効にしたままにしてください。