戦争の霧
Remix は v2.10.0 の future.unstable_fogOfWar Future Flag 経由で "Fog of War" (RFC) のサポートを導入しました。これにより、この動作をオプトインすることができます。この動作は Remix の次のメジャーバージョン、つまり React Router v7 (1、2) でデフォルトになります。
現在の動作
現在、Remix は初期ロード時にルートマニフェスト全体を JS ファイル (例: /assets/manifest-[hash].js) にロードします。マニフェストには、ルートモジュールの実装は含まれていませんが、その URL パスとメタ情報 (ルートの JS/CSS インポート、サーバーに loader / action があるかどうかなど) が含まれています。この完全なマニフェストを事前に取得することで、Remix はリンククリック時に同期的にクライアント側でルートマッチングを行い、ルートモジュールとデータのロードをすぐに開始することができます。小規模から中規模のアプリケーションでは、完全なマニフェストを事前にロードすることは、通常はそれほど負担になりません。これは、高度にキャッシュ可能で、非常に効率的に gzip 圧縮されるためです。しかし、規模が大きくなると、このマニフェストが大きくなりすぎて、一部のパフォーマンス指標に影響を与えることがわかりました。
新しい動作
"Fog of War" を有効にすると、Remix は初期ロード時に完全なルートマニフェストを送信しなくなります。代わりに、SSR レンダリングには初期マニフェストに SSR ルートのみが含まれ、ユーザーがアプリケーション内を移動するにつれて追加のルートがロードされます。時間とともに、マニフェストはユーザーが移動したアプリケーションの部分を含むように拡張されます。
熱心なルート発見
常にそうですが、この種の遅延ルート発見にはトレードオフがあります。初期のアプリケーションロード時間は向上しますが、Remix はリンククリック時に同期的なルートマッチングを実行できなくなり、ウォーターフォールが発生する可能性があります。
現在のアーキテクチャ ( <Link prefetch> を使用しない場合) では、リンクをクリックすると、次のような動作になります。
click /a
|-- ルートモジュールをロード -->
|-- ルートデータをロード -->
| /a をレンダリング
Fog of War アーキテクチャでは、リンクをクリックするとウォーターフォールが発生する可能性があります。
click /a
|-- ルートを発見 -->
|-- ルートモジュールをロード -->
|-- ルートデータをロード -->
| /a をレンダリング
ご存知のとおり、Remix はウォーターフォールを嫌います。そのため、Fog of War 機能では、ほとんどの場合、ウォーターフォールを回避するための最適化が実装されています。デフォルトでは、ページにレンダリングされたすべての <Link> と <NavLink> コンポーネントはバッチ処理され、サーバーへのリクエストによって熱心に "発見" されます。このリクエストは、サーバー上の現在のすべてのリンクパスと一致し、必要なすべてのルートマニフェストエントリを送信します。ほとんどの場合、このリクエストはユーザーがリンクをクリックする前に完了するはずです (ユーザーは通常、最初の数ミリ秒の間はリンクをクリックしないため)。マニフェストは、リンクがクリックされる前にパッチされます。次に、リンクがクリックされると、Remix は Fog of War の動作がなくても、同期的にクライアント側でマッチングを実行することができます。
リンクごとにこの熱心なルート発見をオプトアウトしたい場合は、discover="none" プロパティを使用して実行できます (デフォルト値は discover="render" です)。
注目すべき変更点
- この機能が有効になっている場合、
window.__remixManifest.routesのルートマニフェストには、初期の SSR で必要な最小限のルートのみが含まれ、ユーザーが移動するにつれてルートが動的に追加されます。 - Remix ハンドラには、マニフェストパッチを取得するための新しい内部
/__manifestエンドポイントが追加されました。- ⚠️ これは内部実装の詳細であり、アプリケーションコードから要求することを意図していません。