シングルページアプリケーション (SPA)

React Routerでシングルページアプリケーションを配信するには2つの方法があります。

ライブラリとして - React Routerのフレームワーク機能を使用する代わりに、独自のSPAアーキテクチャでライブラリとして使用できます。React Routerをライブラリとして使用するガイドを参照してください。
フレームワークとして - このガイドではこちらに焦点を当てます。

1. サーバサイドレンダリングの無効化

サーバサイドレンダリングはデフォルトで有効になっています。`react-router.config.ts`で`ssr`フラグを`false`に設定して無効にします。

import { type Config } from "@react-router/dev/config";

export default {
  ssr: false,
} satisfies Config;

これを`false`に設定すると、サーバ側のビルドは生成されなくなります。

2. クライアントローダーとクライアントアクションの使用

サーバサイドレンダリングが無効になっている場合でも、`clientLoader`と`clientAction`を使用して、ルートデータとミューテーションを管理できます。

import { Route } from "./+types/some-route";

export async function clientLoader({
  params,
}: Route.ClientLoaderArgs) {
  let data = await fetch(`/some/api/stuff/${params.id}`);
  return data;
}

export async function clientAction({
  request,
}: Route.ClientActionArgs) {
  let formData = await request.formData();
  return await processPayment(formData);
}

3. プリレンダリング

ビルド時に既知の静的データを持つパスに対してプリレンダリングを設定して、最初のページの読み込み速度を向上させることができます。プリレンダリングを参照して設定してください。

4. 全てのURLをindex.htmlにリダイレクト

`react-router build`を実行した後、`build/client`ディレクトリを任意の静的ホストにデプロイします。

任意のSPAをデプロイする場合と同様に、すべてのURLをクライアントビルドの`index.html`にリダイレクトするようにホストを設定する必要があります。一部のホストではデフォルトでこれを実行しますが、そうでないホストもあります。例として、ホストはこれを行うために`_redirects`ファイルに対応している場合があります。

/*    /index.html   200

アプリケーションの有効なルートで404エラーが発生する場合は、ホストの設定を確認する必要があります。

重要な注意

一般的なシングルページアプリケーションは、ほとんど空の`<div id="root"></div>`以上のものがない、ほぼ空のindex.htmlテンプレートを送信します。

これとは対照的に、`react-router build`（サーバサイドレンダリングが無効になっている場合）はルートとインデックスルートをプリレンダリングします。つまり、次のことができます。

空のdiv以上のものを送信する
Reactコンポーネントを使用して、ユーザーが最初に表示するページを生成する
UIを変更せずに後でサーバサイドレンダリングを再度有効にする

これが、プロジェクトが依然として`@react-router/node`への依存関係を必要とする理由でもあります。