渲染策略

简介

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

下一步：数据加载