リモート間で状態とルーティングを共有する

各Module Federationリモートは、独立してビルドおよびデプロイされるアプリケーションです。その状態（React useState、Context、Zustandストア）は、それぞれのJavaScriptモジュールスコープ内に存在します。ホストとリモートの間で状態が自動的に共有されることはないため、共有方法を明示的に設計する必要があります。

最もシンプルな状態共有の仕組みはURLです。どのリモートでも、リモート間の通信なしにURLパラメーター、クエリ文字列、ハッシュ値を読み取れます。主要なナビゲーション状態、フィルター値、ブックマークやリンクで共有したい状態に適しています。

ブラウザーのEventTargetを介したCustomEventsを使うと、直接インポートせずにリモート間で通信できます。あるリモートがwindow.dispatchEvent(new CustomEvent('cart:updated', { detail: cart }))を呼び出してイベントを発行し、別のモジュール（ホストや他のリモート）がwindow.addEventListener('cart:updated', handler)でリッスンします。共有モジュールは必要ありません。

状態専用の「state remote」を作成し、ZustandまたはJotaiのストアを公開します。ホストと他のリモートがこのstate remoteからインポートすると、同じストアインスタンスを取得できます。共有シングルトンだからです。認証、カート、ユーザー設定などの複雑な共有状態には強力ですが、デプロイの依存関係が増えます。

シェル（ホスト）がすべての共有状態を管理し、propsまたはContextを通じてリモートに渡します。リモートはonCartUpdateのようなコールバックを受け取り、navigateをpropsとして受け取ります。これにより状態をホストに集中できますが、ホストがリモートのAPIを把握する必要があるため、強い結合が生まれます。

React Routerのhistoryとlocationの状態は、Routerコンポーネント（BrowserRouterまたはcreateBrowserRouter）によって提供されます。Module Federationの構成ではRouterは必ず1つだけにしてください。各リモートに配置すると、複数のルーティングコンテキストが競合し、ナビゲーションの問題が発生します。

アーキテクチャ上のルールは、ホスト（シェル）がRouterを提供することです。リモートはホストからルーティング用のpropsを受け取るか、URLを直接読み取ります。リモートが独自のBrowserRouterを作成してはいけません。ホストのRouterと競合し、アプリケーション全体のナビゲーションが壊れてしまいます。

React Contextの値は、特定のReactインスタンスとContextオブジェクトに結び付いています。ホストとリモートの間でContextを機能させるには、通常は共有状態リモートまたは共有ユーティリティパッケージなど、同じソースから同じContextオブジェクトをインポートする必要があります。Reactのシングルトンによって、すべてのリモートで同じContextを使用できます。

整理されたModule Federationアーキテクチャでは、シェル（ホスト）がHTMLシェル、Routerプロバイダー、Authコンテキスト、テーマやデザイントークンのプロバイダー、グローバルナビゲーションを管理します。リモートはそれぞれの機能ドメインのコンテンツを管理します。シェルは実装の詳細を知らずに、リモートをレイアウトに組み込みます。

Module Federationで最も大きなアンチパターンは、ホストとリモートを強く結合することです。たとえば、ホストがリモートから型をインポートする、リモートがホストからコンポーネントをインポートする、または両者が共通のnpmパッケージを共有し、同時に更新しなければならない状態が該当します。こうした結合は、独立デプロイの目的を損ないます。

ホストとリモートの間で明示的な契約を定義してください。これには、リモートコンポーネントが受け取るprops、発行するCustomEvents、読み取るURLパラメーターが含まれます。これらの契約を、共有typesパッケージ内のTypeScriptインターフェースとして文書化します。合意した契約の範囲内で、チームが独立して発展できるようになります。

Module Federationアーキテクチャでは、React Routerプロバイダー（BrowserRouter）をどこに配置すべきでしょうか。

Module Federationのリモート間で状態を共有するには、URL状態（最もシンプル）、CustomEvents（疎結合）、共有状態リモート（集中管理されたストア）、またはpropsとして渡すホスト管理の状態を利用できます。ホストはRouterプロバイダーを1つだけ管理し、リモートは独自のRouterを作成してはいけません。TypeScriptインターフェースによる明確な通信契約によってチーム間の結合を保ち、真の独立デプロイを実現できます。