渲染策略

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 和性能很有用，特别是对于没有服务端渲染的部署。预渲染时，路由模块加载器用于在构建时获取数据。

下一步：数据加载