遅延読み込み

はじめにアンカーリンクをコピー

デフォルトでは、すべての Markdown ファイルと MDX ファイルを事前にコンパイルする必要があります。この制約は開発サーバーにも同様に当てはまります。

そのため、大規模なドキュメントサイトでは開発サーバーの起動に時間がかかる場合があります。これを改善するには、doc コレクションで非同期モードまたは動的モードを有効にできます。

非同期モードアンカーリンクをコピー

非同期モードでは、非同期インポートを使ってコレクションの出力を生成します。

import { defineDocs } from 'fumadocs-mdx/config';

export const docs = defineDocs({
  dir: 'content/docs',
  docs: {
    async: true,
  },
});

使用するバンドラーによっては、開発サーバーでのコンパイル時間を大幅に短縮できる場合があります。

動的モードアンカーリンクをコピー

動的モードでは、オンデマンドでコンパイルを行い、その出力をランタイムで実行します。

shiki をインストールし、外部化(externalize)しておくことを推奨します。

npm i shiki

次のように、コレクションで動的モードを有効にします。

import { defineDocs } from 'fumadocs-mdx/config';

export const docs = defineDocs({
  dir: 'content/docs',
  docs: {
    dynamic: true,
  },
});

次に、Dynamic Entry の手順に従い、動的エントリからコレクションにアクセスするよう変更してください。

使い方アンカーリンクをコピー

フロントマターのプロパティは引き続き page オブジェクトから参照できますが、コンパイル済みのコンテンツ (およびそのエクスポート) を読み込むには、非同期関数 load() を呼び出す必要があります。

例:

import { source } from '@/lib/source';
import { getMDXComponents } from '@/components/mdx';

const page = source.getPage(['...']);

if (page) {
  // フロントマターのプロパティはそのまま利用できます
  console.log(page.data);

  // Markdown コンテンツの取得には await が必要です
  const { body: MdxContent, toc } = await page.data.load();

  console.log(toc);

  return <MdxContent components={getMDXComponents()} />;
}

非同期モードまたは動的モードを使用する場合は、検索の実装にサードパーティのサービスを利用することを強く推奨します。こうしたサービスは一般に、インデックス対象となる大量のコンテンツをより適切に処理できます。