静态构建

安装

🌐 Setup

默认情况下，Fumadocs 使用服务器优先的方法，这种方法始终需要运行中的服务器来提供服务。

🌐 By default, Fumadocs use a server-first approach which always requires a running server to serve.

你可以通过配置你的 React 框架来输出一个静态构建。

🌐 You can output a static build by configuring your React framework.

搜索

🌐 1. Search

内置搜索

🌐 Built-in Search

配置完成后，你的应用将静态存储搜索索引，搜索将在浏览器中进行计算。

🌐 After the configurations, your app will statically store the search indexes, and search will be computed on browser instead.

云解决方案

🌐 Cloud Solutions

由于搜索功能由远程服务器提供支持，静态导出无需配置即可工作。

🌐 Since the search functionality is powered by remote servers, static export works without configuration.

部署

🌐 2. Deployment

Next.js

你可以启用 Next.js 静态导出，它允许你将应用导出为静态 HTML 网站，而无需 Node.js 服务器。

🌐 You can enable Next.js static export, it allows you to export the app as a static HTML site without a Node.js server.

next.config.mjs

/**
 * @type {import('next').NextConfig}
 */
const nextConfig = {
  output: 'export',

  // Optional: Change links `/me` -> `/me/` and emit `/me.html` -> `/me/index.html`
  // trailingSlash: true,

  // Optional: Prevent automatic `/me` -> `/me/`, instead preserve `href`
  // skipTrailingSlashRedirect: true,
};

有关限制和详细信息，请参阅 Next.js 文档。

🌐 See Next.js docs for limitations and details.

React 路由

🌐 React Router

通过配置 SPA 模式，你可以将 build/client 目录作为静态网站进行服务。

🌐 By configuring SPA mode, you can serve the build/client directory as a static website.

别忘了预渲染

在 SPA 模式下，所有服务器端加载器都必须预渲染。

🌐 On SPA mode, all your server-side loaders must be pre-rendered.

有关详情，请参阅 React Router 文档。

🌐 See React Router Docs for details.

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 {
  // disable SSR
  ssr: false,

  async prerender({ getStaticPaths }) {
    const paths: string[] = [...getStaticPaths()];

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

    return paths;
  },
} satisfies Config;

Tanstack 启动

🌐 Tanstack Start

配置 SPA 模式和预渲染，请参阅 SPA 模式以使用 Tanstack Start 部署 SPA 应用。

🌐 Configure SPA mode and pre-rendering, refer to SPA Mode for deploying SPA apps with Tanstack Start.

vite.config.ts

import { tanstackStart } from '@tanstack/react-start/plugin/vite';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [
    // ...other plugins
    tanstackStart({
      spa: {
        enabled: true,
        // Tanstack Router will automatically crawl your pages
        prerender: {
          enabled: true,
        },
        // if you have any hidden paths that's not visible on UI, you can add them explicitly.
        pages: [
          {
            path: '/docs/test',
          },
        ],
      },
    }),
  ],
});

Waku

当所有页面都配置为 static 渲染模式时，Waku 可以以静态方式为你的网站提供服务。

🌐 Waku can serve your site statically when all pages are configured with static render mode.

详情请参阅部署。

🌐 See Deployment for details.

On this page