预渲染

预渲染允许您在构建时渲染页面，而不是在服务器上渲染，从而加快静态内容的页面加载速度。

配置

在你的配置中添加prerender选项，它有三种签名方式

import type { Config } from "@react-router/dev/config";

export default {
  // all static route paths
  // (no dynamic segments like "/post/:slug")
  prerender: true,

  // any url
  prerender: ["/", "/blog", "/blog/popular-post"],

  // async function for dependencies like a CMS
  async prerender({ getStaticPaths }) {
    let posts = await fakeGetPostsFromCMS();
    return ["/", "/blog"].concat(
      posts.map((post) => post.href)
    );
  },
} satisfies Config;

数据加载和预渲染

预渲染没有额外的应用程序 API。预渲染使用与服务器渲染相同的路由加载器。

export async function loader({ request, params }) {
  let post = await getPost(params.slug);
  return post;
}

export function Post({ loaderData }) {
  return <div>{loaderData.title}</div>;
}

构建过程会创建一个new Request()，并像服务器一样将其传递给你的应用程序，而不是在部署的服务器上向你的路由发出请求。

在服务器渲染期间，对未进行预渲染的路径的请求将像往常一样进行服务器渲染。

静态文件输出

渲染结果将写入你的build/client目录。你会注意到每个路径都有两个文件

• [url].html 用于初始文档请求的 HTML 文件
• [url].data 用于客户端导航浏览器请求的文件

构建的输出将指示哪些文件已进行预渲染

> react-router build
vite v5.2.11 building for production...
...
vite v5.2.11 building SSR bundle for production...
...
Prerender: Generated build/client/index.html
Prerender: Generated build/client/blog.data
Prerender: Generated build/client/blog/index.html
Prerender: Generated build/client/blog/my-first-post.data
Prerender: Generated build/client/blog/my-first-post/index.html
...

在开发过程中，预渲染不会将渲染结果保存到公共目录，这仅在react-router build时才会发生。