剖析 Angular @angular/platform-server 的 ServerModule

Angular 提供了多种开发包用于支持各种应用场景。其中 @angular/platform-server 包内的 ServerModule 是专为服务端渲染（Server-Side Rendering, SSR）设计的模块。它为 Angular 应用在服务端运行提供支持，使开发者能够将 Angular 应用预渲染成 HTML 静态页面。这种技术可以提高应用的首屏加载速度，并改善搜索引擎优化（SEO）。

在 Angular 的 SSR 体系中，ServerModule 是核心模块之一，它配合其他工具（如 Angular Universal）共同实现应用的服务端渲染。

ServerModule 的使用场合

ServerModule 的主要使用场合包括以下几个方面：

搜索引擎优化 对于依赖搜索引擎流量的应用（如博客、电子商务网站），ServerModule 通过将应用预渲染为静态 HTML 页面，可以让搜索引擎更高效地索引页面内容。
提升首屏渲染速度 服务端渲染能够让用户在首次访问应用时立即看到预渲染的内容，从而提升用户体验，尤其是在网络延迟较高的情况下。
社交媒体预览优化 一些社交媒体平台会抓取页面内容来生成预览。服务端渲染可以确保预览显示的内容正确无误。
改善低性能设备的体验 对于性能较弱的设备，ServerModule 将部分渲染任务转移到服务器端，减少了客户端的计算压力。

ServerModule 的内容和功能

ServerModule 提供了一系列功能和工具，支持服务端渲染的实现。其核心内容包括：

服务端渲染的基础结构 ServerModule 包含 Angular 应用在服务器端运行所需的核心服务和工具。
支持服务端渲染的指令和管道 例如，当服务端渲染时，某些客户端特定的指令（如 ngIf、ngFor 等）需要特殊处理。
服务端渲染的上下文管理 ServerModule 提供了 PlatformState 和 DOCUMENT 等服务，允许开发者访问渲染的 HTML 内容并对其进行操作。
集成第三方库 通过 ServerModule，可以轻松集成第三方库（如 express），以实现完整的 SSR 应用架构。

如何使用 ServerModule

要在项目中使用 ServerModule，可以按照以下步骤操作：

环境设置

创建 Angular Universal 应用 使用 Angular CLI 创建一个 SSR 应用：
bash 复制代码
```
ng new my-ssr-app --style=scss
cd my-ssr-app
ng add @nguniversal/express-engine
```
该命令会自动安装 @angular/platform-server 并生成服务端应用文件。
安装依赖 确保项目安装了必要的依赖：
bash 复制代码
```
npm install
```

配置 ServerModule

在 app.server.module.ts 文件中，可以看到如下代码：

typescript 复制代码

import { NgModule } from `@angular/core`;
import { ServerModule } from `@angular/platform-server`;
import { AppModule } from `./app.module`;
import { AppComponent } from `./app.component`;

@NgModule({
  imports: [
    AppModule,
    ServerModule
  ],
  bootstrap: [AppComponent],
})
export class AppServerModule {}

此模块定义了服务端渲染的根模块，导入了 ServerModule 以支持 SSR。

配置 Express 服务

在 SSR 应用中，Express 通常用于托管服务端渲染应用。以下是 server.ts 文件的示例：

typescript 复制代码

import `zone.js/node`;
import { ngExpressEngine } from `@nguniversal/express-engine`;
import { AppServerModule } from `./src/main.server`;
import * as express from `express`;
import { join } from `path`;

const app = express();
const PORT = process.env.PORT || 4000;
const DIST_FOLDER = join(process.cwd(), `dist/my-ssr-app/browser`);

app.engine(`html`, ngExpressEngine({
  bootstrap: AppServerModule,
}));

app.set(`view engine`, `html`);
app.set(`views`, DIST_FOLDER);

app.get(`*.*`, express.static(DIST_FOLDER));

app.get(`*`, (req, res) => {
  res.render(`index`, { req });
});

app.listen(PORT, () => {
  console.log(`Node server listening on http://localhost:${PORT}`);
});

上述代码展示了如何使用 Express 托管服务端渲染的 Angular 应用。

示例：服务端渲染实现 SEO 优化

以下是一个简单的 Angular 应用，利用 ServerModule 提升搜索引擎优化：

在 app.component.ts 中添加：

typescript 复制代码

import { Component } from `@angular/core`;

@Component({
  selector: `app-root`,
  template: `
    <h1>Welcome to My SSR App</h1>
    <p>This page is optimized for SEO.</p>
  `,
})
export class AppComponent {}

启动服务端渲染：
bash 复制代码
```
npm run build:ssr
npm run serve:ssr
```
打开浏览器访问 http://localhost:4000，查看预渲染内容。

通过查看页面源代码，可以确认 HTML 内容已成功渲染。

注意事项和优化建议

避免直接操作 DOM 在 SSR 中，直接操作 DOM 会导致运行时错误。建议使用 Angular 的 Renderer2 服务。
懒加载模块 使用懒加载可以减少服务端的渲染压力，并提升客户端加载性能。
数据预取 利用 Angular 的 TransferState 服务，可以在服务端将数据传递到客户端，避免重复请求。