30 使用 Angular Universal 进行服务器端渲染

在上一章中，我们讨论了如何将 Angular 应用程序部署到服务器。在本章中，我们将深入了解 Angular Universal，这是 Angular 的官方解决方案，用于实现服务器端渲染（SSR）。

什么是 Angular Universal？

Angular Universal 是一个用于在服务器上渲染 Angular 应用程序的技术。通过使用 SSR，你可以显著提高应用程序的性能，改善 SEO（搜索引擎优化），并增强用户体验。Angular Universal 允许你的应用在服务器端生成 HTML，这意味着用户在访问时会立即看到内容，而不必等到 JavaScript 加载和执行。

服务器端渲染的优点

使用 Angular Universal 进行服务器端渲染有以下几个主要优点：

1. 更好的加载时间：由于 HTML 已在服务器上生成，页面的首屏加载时间会大大缩短。
2. SEO 友好：许多搜索引擎无法有效索引 SPA（单页面应用程序），但使用 SSR 后，可以清楚地索引每个页面内容。
3. 社交媒体分享：当分享你的网页时，社交媒体平台能够抓取并显示适当的预览内容。

如何实现 Angular Universal

让我们通过步骤讲解如何将服务器端渲染集成到你的 Angular 应用程序中。

1. 安装 Angular Universal

在你的 Angular 项目中，首先，你需要安装 @nguniversal/express-engine 和 @nguniversal/module-map-ngfactory-loader 包。在终端中运行以下命令：

ng add @nguniversal/express-engine

这一命令会自动设置 Angular Universal，并生成需要的文件。

2. 配置应用程序

执行上一步后，你的项目目录中会创建几个新文件，比如 server.ts 和 app.server.module.ts。以下是 server.ts 的一个基本示例：

import 'zone.js/dist/zone-node';
import { enableProdMode } from '@angular/core';
import { ngExpressEngine } from '@nguniversal/express-engine';
import * as express from 'express';
import { join } from 'path';
import { AppServerModule } from './dist/YOUR_PROJECT_NAME/server/main';

enableProdMode();

const app = express();

const PORT = process.env.PORT || 4000;
const DIST_FOLDER = join(process.cwd(), 'dist/YOUR_PROJECT_NAME/browser');

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

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

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

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

3. 构建应用程序

接下来，您需要构建应用以生成浏览器和服务器端的应用程序。可以使用以下命令：

npm run build:ssr

在 package.json 中，确保有以下三个脚本：

"scripts": {
  "build": "ng build --prod",
  "serve": "node dist/YOUR_PROJECT_NAME/server/main.js",
  "build:ssr": "ng build --prod && ng run YOUR_PROJECT_NAME:server:production"
}

4. 运行应用程序

在构建完成后，您可以运行服务器端渲染的应用程序：

npm run serve

访问 http://localhost:4000 ，您将会看到您的 Angular 应用在服务器端的渲染结果。

5. 部署到服务器

和您之前部署 Angular 应用一样，Angular Universal 也可以部署到诸如 Heroku、AWS 或其他支持 Node.js 的云服务提供商。在配置好你的环境后，只需确保运行 npm run build:ssr 和 npm run serve。

示例代码

下面是一个简单的示例，用于说明如何使用 Angular Universal 渲染组件。假设你有一个组件 hello-world，其代码如下：

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

@Component({
  selector: 'app-hello-world',
  template: `<h1>Hello, World!</h1>`,
})
export class HelloWorldComponent {}

当访问 /hello 路径时，你可以在 app.routing.module.ts 文件中添加路由：

const routes: Routes = [
  { path: 'hello', component: HelloWorldComponent },
];

然后在服务器上加载 HelloWorldComponent 并通过 Angular Universal 进行渲染。

总结

在本章中，我们探讨了 Angular Universal 的概念和配置，并通过实际代码示例展示了如何实现服务器端渲染。通过使用 Angular Universal，你能够显著提高应用的性能，增强 SEO 效果，并为用户提供更好的体验。

在下一章中，我们将继续讨论关于 Angular 应用的性能优化策略，确保您能够在各个方面都精益求精，提升应用的响应速度和用户体验。