如何使用 Angular Universal 实现服务端渲染 (SSR)？-JavaScript中文网-JavaScript教程资源分享门户

推荐答案

1. 安装 Angular Universal

首先，你需要安装 Angular Universal 包。可以通过以下命令来安装：

ng add @nguniversal/express-engine

这个命令会自动配置你的项目以支持服务端渲染。

2. 修改 `main.ts` 文件

在 main.ts 文件中，你需要修改启动应用的方式，以便在服务端渲染时使用 AppServerModule。

// www.javascriptcn.com code example
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

3. 创建 `AppServerModule`

创建一个新的 AppServerModule，它将用于服务端渲染。

// www.javascriptcn.com code example
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 {}

4. 配置 `server.ts`

在 server.ts 文件中，配置 Express 服务器来处理服务端渲染的请求。

// www.javascriptcn.com code example
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 './src/main.server';

enableProdMode();

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

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

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

app.get('*.*', express.static(DIST_FOLDER, {
  maxAge: '1y'
}));

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

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

5. 构建和运行

最后，构建你的应用并启动服务器：

npm run build:ssr
npm run serve:ssr

本题详细解读

1. 什么是 Angular Universal？

Angular Universal 是 Angular 的一个技术，它允许你在服务器端渲染 Angular 应用。这意味着当用户请求页面时，服务器会生成完整的 HTML 页面并发送给客户端，而不是在客户端动态生成页面。

2. 为什么需要服务端渲染？

服务端渲染（SSR）有以下几个主要优势：

SEO 优化：搜索引擎可以更好地抓取和索引页面内容。
性能提升：首次加载页面时，用户可以看到完整的 HTML 内容，而不是等待 JavaScript 加载和执行。
更好的用户体验：页面加载速度更快，用户感知到的延迟更低。

3. Angular Universal 的工作原理

Angular Universal 通过在服务器上运行 Angular 应用来生成静态 HTML。当用户请求页面时，服务器会执行 Angular 应用，生成 HTML 并将其发送给客户端。客户端接收到 HTML 后，Angular 会接管并继续运行，使其成为一个单页应用（SPA）。

4. 关键步骤解析

安装 Angular Universal：通过 ng add @nguniversal/express-engine 命令，Angular CLI 会自动配置项目以支持 SSR。
修改 main.ts：在服务端渲染时，Angular 使用 AppServerModule 来启动应用。
创建 AppServerModule：这个模块是服务端渲染的核心，它导入了 ServerModule 并引导 AppComponent。
配置 server.ts：Express 服务器使用 ngExpressEngine 来处理 Angular 应用的渲染请求。
构建和运行：通过 npm run build:ssr 和 npm run serve:ssr 命令，你可以构建并启动服务端渲染的应用。

通过这些步骤，你可以成功地在 Angular 应用中实现服务端渲染，从而提升应用的性能和 SEO 效果。

如何使用 Angular Universal 实现服务端渲染 (SSR)？