# Fumadocs (Framework Mode, React Router): 静的ビルド
URL: /ja/docs/react-router/deploying/static
Source: https://raw.githubusercontent.com/fuma-nama/fumadocs/refs/heads/main/apps/docs/content/docs/(framework)/[framework]/deploying/static.ja.mdx

Fumadocs で静的サイトを出力します。

## セットアップ [#setup]

Fumadocs はデフォルトでサーバーファーストのアプローチを採用しているため、稼働中のサーバーが必要です。
React Router を設定すれば、静的ビルドを出力できます。

静的ビルドにはサーバーが存在しないため、次の機能は動作しません。

* 検索サーバー。代わりに[静的検索](#search)を使用してください。
* [AIに質問](/docs/react-router/integrations/llms#ask-ai)。チャットルートから AI モデルを呼び出す必要があるためです。
* [MCP サーバー](/docs/react-router/integrations/llms#mcp-server)。

また、ミドルウェアも実行されないため、[`Accept` ヘッダーに応じた Markdown](/docs/react-router/integrations/llms#accept) の配信も行われません。

### 検索 [step] [#search]

#### 組み込み検索 [#built-in-search]

1. [検索サーバーを設定します](/docs/headless/search/orama#static-export)。
2. [検索 UI/クライアントを設定します](/docs/react-router/search/orama#static)。

設定が完了すると、検索インデックスがアプリに静的に保存され、検索処理はブラウザ側で行われるようになります。

#### クラウドソリューション [#cloud-solutions]

検索機能はリモートサーバーで動作するため、静的エクスポートでも追加の設定なしで利用できます。

### デプロイ [step] [#deployment]

SPA モードでは、`build/client` ディレクトリを静的サイトとして配信できます。

<Callout type="warning" title="プリレンダリングを忘れずに">
SPA モードでは、サーバーサイドのローダーをすべてプリレンダリングする必要があります。

詳細については、[React Router のドキュメント](https://reactrouter.com/how-to/spa)を参照してください。
</Callout>

```ts title="react-router.config.ts"
import type { Config } from '@react-router/dev/config';
import { glob } from 'node:fs/promises';
import { createGetUrl, getSlugs } from 'fumadocs-core/source';

const getUrl = createGetUrl('/docs');

export default {
  // SSR を無効化 [!code highlight:2]
  ssr: false,

  // [!code ++:9]
  async prerender({ getStaticPaths }) {
    const paths: string[] = [...getStaticPaths()];

    for await (const entry of glob('**/*.{md,mdx}', { cwd: 'content/docs' })) {
      paths.push(getUrl(getSlugs(entry)));
    }

    return paths;
  },
} satisfies Config;
```