React router渲染策略

React Router 中有三种渲染策略：

客户端渲染
服务器端渲染
静态预渲染

客户端渲染
当用户在应用内进行导航时，路由始终在客户端进行渲染。如果你打算构建一个单页面应用，可禁用服务器端渲染：

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

export default {
  ssr: false,
} satisfies Config;

服务器端渲染

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

export default {
  ssr: true,
} satisfies Config;

服务器端渲染需要支持该功能的部署环境。尽管这是一个全局设置，但各个路由仍可以进行静态预渲染。路由也可以使用带有 clientLoader 的客户端数据加载功能，以避免对其负责的那部分用户界面进行服务器端渲染 / 数据获取操作。

静态预渲染

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

export default {
  // return a list of URLs to prerender at build time
  async prerender() {
    return ["/", "/about", "/contact"];
  },
} satisfies Config;

预渲染是一种在构建时执行的操作，它会为一系列 URL 生成静态 HTML 以及客户端导航数据有效载荷。这对于搜索引擎优化（SEO）和性能方面很有用，尤其适用于不具备服务器端渲染的部署环境。在进行预渲染时，会使用路由模块加载器在构建时获取数据。