遅延ルート探索 (別名 "Fog of War")

これは不安定な API であり、今後も変更される可能性があります。本番環境では使用しないでください。

Remix は、v2.10.0 [future.unstable_lazyRouteDiscovery 将来のフラグ] にある遅延ルート探索 (別名 "Fog of War") (RFC) のサポートを追加しました。これにより、この動作をオプトインできます。これは、Remix の次のメジャーバージョン (別名 React Router v7 (1, 2)) でデフォルトになります。この機能の詳細については、ブログ投稿をご覧ください。

現在の動作

現在、Remix は、初期ロード時に完全なルートマニフェストを JS ファイル (例: /assets/manifest-[hash].js) にロードします。マニフェストには、ルートモジュールの実装ではなく、それらの URL パスとメタ情報 (ルート JS/CSS のインポート、サーバーに loader/action があるかどうかなど) が含まれています。この完全なマニフェストを事前に取得することで、Remix は Link クリックでクライアント側の同期ルートマッチングを実行し、ルートモジュールとデータのロードをすぐに開始できます。中小規模のアプリケーションでは、完全なマニフェストを事前にロードすることは、通常、非常にキャッシュ可能で非常にうまく GZIP 圧縮されるため、問題になりません。しかし、大規模なアプリケーションでは、このマニフェストが大きくなりすぎて、一部のパフォーマンス指標に影響を与えることがわかりました。

新しい動作

"Fog of War" を有効にすると、Remix は初期ロード時に完全なルートマニフェストを送信しなくなります。代わりに、SSR レンダリングには、初期マニフェストに SSR ルートのみが含まれ、ユーザーがアプリケーション内を移動すると、追加のルートがロードされます。時間が経つにつれて、マニフェストはユーザーが移動したアプリケーションの部分を含めるように成長します。

これは、アプリケーションの URL をエンドユーザーから「隠す」ための方法 ではありません。マニフェストにすべてを最初から送信するわけではありませんが、ユーザーがアプリケーション内を移動すると新しいルートを取得するために使用されるマニフェストエンドポイントは、依然として定義されているすべてのアプリケーションルートを公開することができます。ただし、少しわかりにくくなっています。

一括ルート発見

いつものように、このタイプの遅延ルート探索にはトレードオフがあります。初期アプリケーションのロード時間を短縮しますが、Remix はリンククリックで同期ルートマッチングを実行できなくなるため、ウォーターフォールが発生する可能性があります。

現在のアーキテクチャ (<Link prefetch> を使用しない) では、リンクをクリックすると、次のようになります。

click /a
        |-- ルートモジュールのロード -->
        |-- ルートデータのロード -->
                                 | /a をレンダリング

"Fog of War" アーキテクチャでは、リンクをクリックすると、ウォーターフォールが発生する可能性があります。

click /a
        |-- ルートの発見 -->
                              |-- ルートモジュールのロード -->
                              |-- ルートデータのロード -->
                                                       | /a をレンダリング

ご存知のとおり、Remix はウォーターフォールを嫌います。そのため、"Fog of War" 機能は、ほとんどの場合にウォーターフォールを回避するための最適化を実装しています。デフォルトでは、ページにレンダリングされたすべての <Link> と <NavLink> コンポーネントはバッチ処理され、サーバーへのリクエストによってeagerに「発見」されます。このリクエストは、サーバー上の現在のすべてのリンクパスを照合し、必要なすべてのルートマニフェストエントリを送信します。ほとんどの場合、このリクエストはユーザーがリンクをクリックする前に完了するはずであり (ユーザーは通常最初の数百ミリ秒でリンクをクリックしないため)、マニフェストはリンクがクリックされる前にパッチされます。次に、リンクがクリックされると、Remix は "Fog of War" 動作がない場合と同じように、クライアント側の同期マッチングを実行できます。

このeagerルート発見をリンクごとにオプトアウトしたい場合は、discover="none" プロップを使用できます (デフォルト値は discover="render" です)。

注目すべき変更点

この機能が有効になっている場合、window.__remixManifest.routes のルートマニフェストには、最初の SSR で必要な最小限のルートのみが含まれ、ユーザーが移動するとルートが動的に追加されます
Remix ハンドラーには、マニフェストパッチを取得するための新しい内部 /__manifest エンドポイントがあります
- デプロイメントアーキテクチャは、/__manifest リクエストを Remix ハンドラーにルーティングする必要があります
- CDN/Edge キャッシュレイヤーを使用している場合は、/__manifest ルートは、キャッシュキーに含める必要がある可能性のある 2 つのクエリ文字列パラメーター (version と p) を受け付けます
- ⚠️ これは内部実装の詳細と見なされ、アプリケーションコードでリクエストすることを意図していません