レンダリング戦略

React Routerには3つのレンダリング戦略があります。

• クライアントサイドレンダリング
• サーバーサイドレンダリング
• 静的プリレンダリング

クライアントサイドレンダリング

ルートは、ユーザーがアプリ内を移動する際に常にクライアントサイドでレンダリングされます。シングルページアプリケーションを構築する場合は、サーバーレンダリングを無効にしてください。

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;

プリレンダリングは、ビルド時に静的HTMLとクライアントナビゲーションデータペイロードをURLのリストに対して生成する操作です。これは、SEOとパフォーマンス、特にサーバーレンダリングのないデプロイメントに役立ちます。プリレンダリングを行う場合、ルートモジュールローダーを使用してビルド時にデータを取得します。

次へ: データの読み込み