Remix ドキュメント 日本語版

English

レイジーなルート検出（別名「フォグ・オブ・ウォー」）

Remix は、v2.10.0 で future.unstable_lazyRouteDiscovery Future Flag の背後でレイジーなルート検出（別名「フォグ・オブ・ウォー」）(RFC) のサポートを導入しました（後に v2.13.0 で future.v3_lazyRouteDiscovery として安定化）。これにより、この動作をオプトインできるようになり、Remix の次のメジャーバージョン、つまり React Router v7 (1, 2) でデフォルトになります。この機能の詳細については、ブログ記事 をご覧ください。

現在の動作

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

新しい動作

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

これは、アプリケーションの URL をエンドユーザーから「隠す」方法ではないことに注意してください。最初はすべてをマニフェストに含めて送信しませんが、ユーザーが移動するにつれて新しいルートをフェッチするために使用されるマニフェストエンドポイントは、定義されたすべてのアプリケーションルートを公開する機能を引き続き持っています。ただし、少しだけ隠蔽されているだけです。

積極的なルート検出

いつものように、このタイプのレイジーなルート検出にはトレードオフがあります。初期アプリケーションのロード時間が改善されますが、Remix はリンククリック時に同期的なルートマッチングを実行できなくなり、ウォーターフォールが発生する可能性があります。

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

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

フォグ・オブ・ウォーのアーキテクチャでは、リンクをクリックするとウォーターフォールが発生する可能性があります。

/a をクリック
        |-- ルートを検出 -->
                              |-- ルートモジュールをロード -->
                              |-- ルートデータをロード -->
                                                       | /a をレンダリング

ご存知のとおり、Remix はウォーターフォールを嫌うため、フォグ・オブ・ウォー機能は、ほとんどの場合にウォーターフォールを回避するための最適化を実装しています。デフォルトでは、ページにレンダリングされたすべての <Link> および <NavLink> コンポーネントはバッチ処理され、サーバーへのリクエストを介して積極的に「検出」されます。このリクエストは、サーバー上の現在のすべてのリンクパスを照合し、必要なすべてのルートマニフェストエントリを返送します。ほとんどの場合、このリクエストはユーザーがリンクをクリックする前に完了するはずであり（ユーザーは通常、最初の数百ミリ秒でリンクをクリックしないため）、リンクがクリックされる前にマニフェストがパッチされます。その後、リンクがクリックされると、Remix はフォグ・オブ・ウォーの動作が存在しないかのように、同期的なクライアントサイドのマッチングを実行できます。

リンクごとにこの積極的なルート検出をオプトアウトしたい場合は、discover="none" プロパティを使用して行うことができます（デフォルト値は discover="render" です）。

注目すべき変更点

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