渲染策略

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进行客户端数据加载，以避免其UI部分的服务器渲染/获取。

静态预渲染

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 和性能非常有用，尤其是在没有服务器渲染的部署环境中。在预渲染时，路由模块加载器用于在构建时获取数据。

下一步：数据加载