NX 的 React 擴充有提供建立 Module Federation 架構專案的功能，來試試看。

首先簡介一下 Module Federation 架構，相較於一般的 SPA 將所有程式碼放在一個專案中並經由路由去提供不同頁面，Module Federation 提倡將個別頁面切分成複數個 SPA 專案，並分別部署這些專案。

而當某專案要切換頁面時，不是從自己的伺服器上取得目標頁面的內容，而是從另一個切分出的專案伺服器引入該頁面並渲染。

這樣的架構有幾個好處：

1. 各頁面專案間相當獨立，可以分別交由不同的團隊做開發而不需要擔心會互相污染程式碼。
2. 根據頁面的用途做不同等級的部署，並且負載是分開的，而且可以各自獨立更新。

不過也是有些問題，例如部署工作變成數倍，可能出現套件版本衝突等。

這些問題放到 NX monorepo 底下都能得到一定程度的改善，像是因為 Integrated 架構不會有版本衝突等。

簡介說到這，來動手了。

pnpm exec nx generate @nx/react:host --name=host --remotes=landing,shop

Module Federation 在架構上會需要有一個進入點，一般叫做 Host ，做為首頁並導入其他頁面。

上面的指令會建立三組不同的專案。

apps
├── host
├── host-e2e
├── landing
├── landing-e2e
├── shop
└── shop-e2e

生成器跑完後可以 serve host 看看，會同時啟動三組伺服器。

pnpm exec nx run host:serve

打開頁面可以看到這些連結。

點 Shop 的連結就跳轉到 Shop 的頁面 http://localhost:4200/shop，看起來跟平常的 SPA 一樣。

不過其實頁面的資源是從另一個伺服器來的，可以打開 Shop 自己伺服器的連結看看，預設連結會是 http://localhost:4202/ 。

NX 幫忙建立這個架構真的很方便，省卻很多設定的步驟，不過目前沒有對應 Next 工具，得再研究看看怎麼在 Next 設定 Module Federation。