渲染策略

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 和效能非常有用，尤其是在沒有伺服器端渲染的部署環境中。當預先渲染時，會使用路由模組載入器在建置時期擷取資料。

下一步：資料載入