# Angular 模块联邦服务端渲染
历史上，模块联邦主要限于客户端渲染（CSR），主要受益于单页应用（SPA）。然而，随着网络开发景观的不断发展，由于其众多优势，服务器端渲染（SSR）越来越受到青睐。
## Nx 在模块联邦中的 SSR 推进（从版本 15.4 开始）
随着 15.4 版本的发布，Nx 引入了支持 SSR 的模块联邦，这是一个重要的里程碑。这种在 Nx 工作空间中将模块联邦与 SSR 结合的方式，利用了两种技术的优势。
为了全面理解 Nx 及其与模块联邦的集成，我们强烈推荐你查阅官方的 Nx 文档。它提供了深入的见解和实际指导，以有效地利用这些技术。你可以通过以下链接访问这个宝贵的资源：
- [官方 Nx 文档关于模块联邦](https://nx.dev/recipes/module-federation)
本指南专注于为 Angular 应用程序特别设置模块联邦与服务器端渲染。
## 工作原理
在传统的 SSR 应用程序中，服务器负责根据浏览器请求的路由来渲染应用程序。当将模块联邦与 SSR 结合时，这个概念就扩展了。如果一个路由指向一个远程模块，宿主服务器将路由处理委托给远程服务器，然后远程服务器渲染 HTML 并将其发送回浏览器。
这种集成不仅充分利用了 SSR 的全部潜力，而且还保持了将构建划分为更小段的灵活性。它促进了应用程序内功能的独立部署，允许更新远程服务器而无需完全重新部署宿主服务器。
## 逐步指南
我们将从一个名为 'dashboard' 的宿主应用程序和一个名为 'login' 的远程应用程序开始。
### 创建 Nx 工作空间
开始通过执行以下命令来创建一个新的 Nx 工作空间：
```bash
npx create-nx-workspace@latest myorganization
```
在这个过程，你将遇到有关工作空间类型和预设的提示。
按照以下方式响应提示：
```bash
- Workspace type: "integrated"
- Workspace content: "apps"
- Enable distributed caching (CI speed enhancement): "No"
```
**Nx Cloud 选项 (可选)**
在设置你的工作空间时，系统还会询问你是否要添加 Nx Cloud。本指南不涵盖 Nx Cloud，但其与模块联邦的集成有利于团队和 CI 之间共享缓存，加快构建时间。在 [Nx Cloud 官网](https://nx.app) 上了解有关 Nx Cloud 的更多信息。
### 安装 Nx Angular Plugin
在创建 workspace 后，导航到此：
```bash
cd myorganization
```
#### 安装官方 Nx Angular 插件
```bash
npm install @nx/angular
```
### 创建应用
使用一个命令为你的模块联邦架构和SSR搭建框架：
```bash
npx nx g host dashboard --remotes=login --ssr
```
这个命令生成两个Angular Universal（SSR）应用程序，并为浏览器和服务器配置Webpack，启用模块联邦。
### 提供应用程序
1. 要提供'dashboard'（宿主）和'login'（远程）应用程序，运行：
```bash
npx nx serve-ssr dashboard
```
这为 'login' 应用构建了浏览器和服务器打包文件，并使用Node.js运行它。请注意，'login' 应用不带有文件观察者运行，因此其代码中的更改不会自动反映出来。
## 缓存和实时更新
- Nx缓存了'login'应用程序的浏览器和服务器打包构建。在后续运行中，它使用此缓存而不是重新构建应用程序。
- 对于'dashboard'应用程序，服务器构建包括文件监视器，从而实现代码的实时更新。
## 验证设置
1. 成功编译后，你将看到成功消息，指示服务器的监听地址，通常为 `http://localhost:4200`。
2. 在浏览器中打开此地址并检查DevTools的Network选项卡。
### 模块联邦在行动
- 最初，Angular Universal将处理渲染，随后的导航将切换到客户端渲染（CSR）。
- 导航至 [http://localhost:4200/login](http://localhost:4200/login) 将展示登录页面的服务器呈现HTML，展示模块联邦解析和呈现远程服务器模块的能力。
### 登录应用程序的实时更新
如果你正在积极开发'login'应用程序并需要实时看到你更改的结果，你可以通过代码修改来启用服务器
```bash
npx nx serve-ssr dashboard --devRemotes=login
```
使用此命令，每当你进行更改时，服务器将重新构建'login'应用程序，从而实现迭代且高效的开发过程。