# Fumadocs (Framework Mode, React Router): 靜態建置
URL: /zh-TW/docs/react-router/deploying/static
Source: https://raw.githubusercontent.com/fuma-nama/fumadocs/refs/heads/main/apps/docs/content/docs/(framework)/[framework]/deploying/static.zh-TW.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;
```