React Router 预渲染的工作原理和价值（Pre-rendering）

核心概念解析

简单来说，预渲染 就是在构建时 (build time) ，提前将你网站的某些页面渲染成完整的静态 HTML 文件。

你可以把它想象成"预先烘焙蛋糕"：

• 传统客户端渲染 (CSR) ：把面粉和鸡蛋（JS代码）给用户，让用户自己在家里的烤箱（浏览器）里烤蛋糕。用户需要等待。
• 服务端渲染 (SSR) ：用户每次下单，你都在后厨（服务器）现场烤一个新蛋糕给他。速度快，但服务器一直很忙。
• 预渲染 (Pre-rendering) ：你在开店前，就提前把最受欢迎的几款蛋糕（比如"关于我们"、"联系方式"页面）烤好放在货架上。用户一来，直接拿走，速度最快。

它做了什么？

在运行 npm run build 时，React Router 会：

1. 找到你在 prerender 配置中指定的 URL 列表（如 ["/", "/about"]）。
2. 对于每个 URL，它会在构建环境中运行对应的 loader 函数，获取页面所需的数据。
3. 用获取到的数据，将 React 组件渲染成一个静态的 [url].html 文件。
4. 同时，它还会把 loader 返回的数据单独存成一个数据负载文件（[url].data） ，供后续的客户端导航使用。

为什么要这么做？

主要有两个目的：

1. 极致的性能：用户访问预渲染的页面时，浏览器直接接收到完整的 HTML，无需等待 JavaScript 下载和执行就能看到内容，首屏加载速度极快。
2. 完美的 SEO：搜索引擎的爬虫可以直接抓取和索引静态的 HTML 内容，对 SEO 非常友好。

---

工作流程

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

export default {
  // 告诉构建工具，需要预渲染哪些路径
  async prerender() {
    // 也可以从 CMS 或数据库动态获取文章列表来生成路径
    const posts = await getPostsFromCMS();
    const postUrls = posts.map(post => `/blog/${post.slug}`);
    
    return ["/", "/about", "/contact", ...postUrls];
  },
} satisfies Config;

当你执行构建命令后，你的 build/client 目录下会生成类似这样的文件结构：

text
build/client/
├── index.html        # 对应 "/"
├── index.data        # 对应 "/" 的 loader 数据
├── about/
│   ├── index.html    # 对应 "/about"
│   └── index.data    # 对应 "/about" 的 loader 数据
└── ...其他文件

然后你只需要把整个 build/client 文件夹部署到一个静态文件托管服务（如 Netlify, Vercel, GitHub Pages）即可。

---

对比其他渲染策略

策略	渲染时机	后端需求	首屏性能	SEO
预渲染 (SSG)	构建时	不需要 (静态服务器)	最快	最佳
服务端渲染 (SSR)	请求时 (实时)	必须 (Node.js 服务器)	很快	很好
客户端渲染 (CSR)	浏览器中 (实时)	不需要 (静态服务器)	最慢	较差

---

两种主要应用模式

React Router 的预渲染非常灵活，可以和 ssr 配置结合使用：

1. 纯静态站点 (ssr: false)

这是最常见的用法。你告诉 React Router 不要启用运行时服务器，并将指定（或所有静态）路由都预渲染成 HTML。

export default {
  ssr: false, // 禁用运行时 SSR
  prerender: true, // 预渲染所有能预渲染的静态路径
} satisfies Config;

优点：部署简单，成本极低，性能和 SEO 效果好。非常适合博客、文档站、公司官网等内容不常变的网站。

2. 混合模式 (ssr: true)

在这种模式下，你仍然部署一个 SSR 服务器，但对一些高频访问的静态页面（如首页）进行预渲染。

export default {
  ssr: true, // 启用运行时 SSR
  prerender: ["/", "/about"], // 只预渲染这几个特定页面
} satisfies Config;

工作方式：

• 当用户访问 / 或 /about 时，服务器直接发送预先生成好的 HTML，速度极快。
• 当用户访问其他动态页面（如 /dashboard/:userId）时，SSR 服务器会实时渲染页面。
  优点：结合了 SSG 的极致性能和 SSR 的动态灵活性。

---

总结

• 预渲染 是在构建时生成静态 HTML 页面的技术。
• 它使用 loader 在构建时获取数据，并将数据和页面内容"烘焙"到 HTML 中。
• 主要优势是提升首屏性能 和优化 SEO。
• 特别适合那些不需要实时服务器渲染，可以部署在静态托管平台上的应用。