渲染策略

简介

React Router 中有三种渲染策略

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

客户端渲染

当用户在应用中导航时，路由始终在客户端进行渲染。如果您想构建一个单页应用（SPA），请禁用服务器渲染。

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

下一步: 数据加载