遅延ルート検出

遅延ルート検出は、完全なルートマニフェストを事前にロードするのではなく、ユーザーがアプリケーション内を移動するにつれてルート情報を段階的にロードするパフォーマンス最適化です。

遅延ルート検出が有効になっている場合（デフォルト）、React Router は初期のサーバーサイドレンダリングに必要なルートのみをマニフェストで送信します。ユーザーがアプリケーションの新しい部分に移動すると、追加のルート情報が動的にフェッチされ、クライアントサイドのマニフェストに追加されます。

ルートマニフェストには、ルートに関するメタデータ（JavaScript/CSS のインポート、ルートに loaders/actions があるかどうかなど）が含まれますが、実際のルートモジュールの実装は含まれません。これにより、React Router は不要なルート情報をダウンロードすることなく、アプリケーションの構造を理解できます。

ルート検出プロセス

ユーザーが現在のマニフェストにない新しいルートにナビゲートすると、以下のプロセスが実行されます。

ルート検出リクエスト - React Router は内部の /__manifest エンドポイントにリクエストを行います
マニフェストパッチ - サーバーは必要なルート情報で応答します
ルートロード - React Router は必要なルートモジュールとデータをロードします
ナビゲーション - ユーザーは新しいルートにナビゲートします

イーガー検出の最適化

ナビゲーションのウォーターフォールを防ぐため、React Router はイーガーなルート検出を実装しています。現在のページにレンダリングされるすべての <Link> および <NavLink> コンポーネントは、サーバーへのバッチリクエストを介して自動的に検出されます。

この検出リクエストは、通常、ユーザーがリンクをクリックする前に完了するため、遅延ルート検出が有効になっている場合でも、その後のナビゲーションは同期的に感じられます。

// Links are automatically discovered by default
<Link to="/dashboard">Dashboard</Link>
 
// Opt out of discovery for specific links
<Link to="/admin" discover="none">Admin</Link>

パフォーマンス上の利点

遅延ルート検出は、いくつかのパフォーマンス改善を提供します。

高速な初期ロード - 未使用のルートメタデータを除外することで、初期バンドルサイズを縮小
メモリ使用量の削減 - ルート情報は必要なときにのみロードされます
スケーラビリティ - 数百のルートを持つアプリケーションでは、より大きなメリットが見られます

設定

react-router.config.ts でルート検出の動作を設定できます。

react-router.config.ts

export default {
  // デフォルト: /__manifest エンドポイントを使用した遅延検出
  routeDiscovery: {
    mode: "lazy",
    manifestPath: "/__manifest",
  },
 
  // カスタムマニフェストパス (同じドメイン上の複数のアプリで有用)
  routeDiscovery: {
    mode: "lazy",
    manifestPath: "/my-app-manifest",
  },
 
  // 遅延検出を無効にする (最初にすべてのルートを含める)
  routeDiscovery: { mode: "initial" },
} satisfies Config;

デプロイに関する考慮事項

遅延ルート検出を使用する場合、デプロイ設定がマニフェストリクエストを適切に処理することを確認してください。

ルートハンドリング - /__manifest リクエストが React Router のハンドラに到達することを確認してください
CDN キャッシュ - CDN/エッジキャッシュを使用している場合は、マニフェストエンドポイントのキャッシュキーに version と paths のクエリパラメータを含めてください
複数のアプリケーション - 同じドメインで複数の React Router アプリケーションを実行している場合は、カスタムの manifestPath を使用してください

ルート検出プロセス
イーガー検出の最適化
パフォーマンス上の利点
設定
デプロイに関する考慮事項