Berbagi Status dan Perutean Antar-Remote

Setiap remote Module Federation adalah aplikasi yang dibuat dan diterapkan secara independen. Statusnya (React useState, konteks, dan penyimpanan Zustand) berada dalam lingkup modul JavaScript-nya sendiri. Host dan remote tidak otomatis berbagi status—Anda harus merancang mekanisme berbagi tersebut secara eksplisit.

Mekanisme berbagi status yang paling sederhana adalah URL: remote mana pun dapat membaca parameter URL, string kueri, dan nilai hash tanpa komunikasi lintas-remote. Cara ini cocok untuk status navigasi utama, nilai filter, dan status apa pun yang seharusnya dapat ditandai serta dibagikan melalui tautan.

CustomEvents melalui EventTarget browser memungkinkan remote berkomunikasi tanpa impor langsung. Sebuah remote menjalankan window.dispatchEvent(new CustomEvent('cart:updated', { detail: cart })), lalu modul lain mana pun (host atau remote lainnya) mendengarkan dengan window.addEventListener('cart:updated', handler). Modul bersama tidak diperlukan.

Buat "remote status" khusus yang mengekspos penyimpanan Zustand atau Jotai. Host dan remote lainnya mengimpor dari remote status ini dan mendapatkan instans penyimpanan yang sama—karena penyimpanan tersebut merupakan singleton bersama. Cara ini sangat berguna untuk status kompleks yang digunakan bersama (autentikasi, keranjang, dan preferensi pengguna), tetapi menambah dependensi penerapan.

Shell (host) memiliki semua status bersama dan meneruskannya ke remote sebagai properti atau melalui konteks. Remote menerima fungsi panggilan balik seperti onCartUpdate dan navigasi sebagai properti. Cara ini memusatkan status di host, tetapi mengharuskan host mengetahui API remote sehingga menciptakan keterikatan yang erat.

Status riwayat dan lokasi React Router disediakan oleh komponen Router (BrowserRouter atau createBrowserRouter). Harus ada tepat satu Router dalam penyiapan Module Federation—menempatkannya di setiap remote akan membuat beberapa konteks perutean yang saling bersaing dan menyebabkan konflik navigasi.

Aturan arsitekturnya adalah: host (shell) menyediakan Router. Remote menerima properti perutean dari host (atau membaca URL secara langsung). Remote tidak boleh membuat BrowserRouter sendiri—hal itu akan bertentangan dengan Router milik host dan merusak navigasi seluruh aplikasi.

Nilai konteks React terikat pada instans React dan objek konteks tertentu. Agar konteks dapat digunakan oleh host dan remote, keduanya harus mengimpor objek konteks yang sama dari sumber yang sama—biasanya remote status bersama atau paket utilitas bersama. Singleton React memastikan konteks yang sama dapat digunakan oleh semua remote.

Dalam arsitektur Module Federation yang rapi, shell (host) memiliki: shell HTML, penyedia Router, konteks Auth, penyedia token tema/desain, dan navigasi global. Remote memiliki konten domain fiturnya masing-masing. Shell menyusun remote ke dalam tata letak tanpa perlu mengetahui detail implementasinya.

Antipola terbesar dalam Module Federation adalah keterikatan erat antara host dan remote: host mengimpor tipe dari remote, remote mengimpor komponen dari host, atau keduanya berbagi paket npm yang harus diperbarui secara bersamaan. Keterikatan ini menggagalkan tujuan penerapan independen.

Tentukan kontrak yang jelas antara host dan remote: properti yang diterima komponen remote, CustomEvents yang dikirimkannya, dan parameter URL yang dibacanya. Dokumentasikan kontrak ini sebagai antarmuka TypeScript dalam paket tipe bersama. Dengan demikian, tim dapat berkembang secara independen dalam batas kontrak yang disepakati.

Di mana penyedia React Router (BrowserRouter) harus ditempatkan dalam arsitektur Module Federation?

Berbagi status di antara remote Module Federation dapat menggunakan status URL (paling sederhana), CustomEvents (keterikatan longgar), remote status bersama (penyimpanan terpusat), atau status milik host yang diteruskan sebagai properti. Host harus memiliki satu-satunya penyedia Router—remote tidak boleh membuat Router sendiri. Kontrak komunikasi yang jelas melalui antarmuka TypeScript menjaga keterpisahan tim dan memungkinkan penerapan independen yang sesungguhnya.