Angular 的服务端渲染 (SSR) 实践

随着现代 Web 应用的复杂度不断增加，前端技术也在不断发展。服务端渲染 (Server-Side Rendering, SSR) 技术作为一种优化前端性能、提高用户体验的方式，受到了越来越多的关注。Angular 作为一种流行的前端框架，也提供了 SSR 的实现方式。

SSR 的优势

SSR 技术的主要优势在于可以提高 Web 应用的性能和用户体验。在传统的前端渲染方式中，当用户访问一个页面时，浏览器会下载 HTML、CSS 和 JavaScript 文件，然后在本地进行渲染。这种方式存在以下问题：

• 首屏加载时间长：由于需要下载和渲染的内容较多，用户需要等待较长的时间才能看到页面内容。
• SEO 不友好：由于搜索引擎爬虫只能抓取静态 HTML，因此对于通过 JavaScript 渲染的页面，搜索引擎很难正确抓取和索引。
• 用户体验差：由于页面需要等待所有 JavaScript 加载完成后才能交互，用户体验会受到影响。

SSR 技术可以解决这些问题。在 SSR 中，服务器会在响应请求时，将页面的 HTML、CSS 和 JavaScript 文件一并发送至客户端，并在服务器端进行渲染。这样可以提高首屏加载速度，同时也可以让搜索引擎正确抓取和索引页面内容，提高 SEO。此外，由于页面已经在服务器端渲染完成，因此用户可以更快地与页面进行交互，提高用户体验。

Angular 的 SSR 实现

Angular 提供了 @angular/platform-server 模块，可以用于实现 SSR。使用 Angular SSR，可以使应用更容易被搜索引擎抓取，提高首屏加载速度，并且可以提高应用的可访问性和可用性。

Angular SSR 的基本原理

在 Angular SSR 中，应用的主要逻辑仍然在客户端进行处理。但是，服务器端会在响应请求时，将应用的 HTML、CSS 和 JavaScript 文件一并发送至客户端，并在服务器端进行渲染，生成最终的 HTML 页面。客户端在接收到服务器返回的 HTML 页面后，会将其插入到 DOM 中，并继续处理后续的逻辑。

实现 Angular SSR 的步骤

要实现 Angular SSR，需要按照以下步骤进行操作：

1. 创建 Angular 应用

首先需要创建一个 Angular 应用。可以使用 Angular CLI 工具来创建应用：

ng new my-app

1. 安装 @angular/platform-server 模块

npm install @angular/platform-server

1. 创建服务器端应用

创建一个服务器端应用，用于处理客户端的请求。可以使用 Express 或 Koa 等 Node.js 框架来创建服务器端应用。创建服务器端应用时，需要做以下几个步骤：

• 引入必要的模块：

import 'zone.js/dist/zone-node';
import { renderModuleFactory } from '@angular/platform-server';
import { provideModuleMap } from '@nguniversal/module-map-ngfactory-loader';
import { readFileSync } from 'fs';
import { join } from 'path';

• 加载编译后的 Angular 应用：

const { AppServerModuleNgFactory, LAZY_MODULE_MAP } = require('./dist/my-app-server/main');

• 创建 Express 应用：

const app = express();

• 设置静态文件目录：

app.use(express.static(join(__dirname, 'dist')));

• 处理客户端请求：

// javascriptcn.com 代码示例
app.get('*', (req, res) => {
  const template = readFileSync(join(__dirname, 'dist', 'index.html')).toString();
  const url = req.protocol + '://' + req.get('host') + req.originalUrl;
  renderModuleFactory(AppServerModuleNgFactory, {
    document: template,
    url: url,
    extraProviders: [
      provideModuleMap(LAZY_MODULE_MAP)
    ]
  }).then(html => {
    res.send(html);
  });
});

1. 编译 Angular 应用

使用以下命令来编译 Angular 应用：

ng build --prod && ng run my-app:server

这将会生成一个 dist 目录，其中包含编译后的客户端和服务器端应用。

1. 启动服务器端应用

使用以下命令来启动服务器端应用：

node dist/my-app-server/main.js

这将会启动服务器端应用，并监听来自客户端的请求。

示例代码

下面是一个简单的 Angular SSR 应用示例代码：

// javascriptcn.com 代码示例
// app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

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

// app.component.ts

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

@Component({
  selector: 'app-root',
  template: `
    <h1>Hello, {{ name }}!</h1>
  `,
})
export class AppComponent {
  name = 'Angular';
}

// server.ts

import 'zone.js/dist/zone-node';
import { renderModuleFactory } from '@angular/platform-server';
import { provideModuleMap } from '@nguniversal/module-map-ngfactory-loader';
import { readFileSync } from 'fs';
import { join } from 'path';
import * as express from 'express';
import { enableProdMode } from '@angular/core';
import { AppServerModuleNgFactory, LAZY_MODULE_MAP } from './dist/my-app-server/main';

enableProdMode();

const app = express();

app.use(express.static(join(__dirname, 'dist')));

app.get('*', (req, res) => {
  const template = readFileSync(join(__dirname, 'dist', 'index.html')).toString();
  const url = req.protocol + '://' + req.get('host') + req.originalUrl;
  renderModuleFactory(AppServerModuleNgFactory, {
    document: template,
    url: url,
    extraProviders: [
      provideModuleMap(LAZY_MODULE_MAP)
    ]
  }).then(html => {
    res.send(html);
  });
});

app.listen(3000, () => {
  console.log('Server running on http://localhost:3000');
});

总结

Angular SSR 技术可以提高 Web 应用的性能和用户体验，同时也可以提高应用的可访问性和可用性。通过本文的介绍，你可以了解到 Angular SSR 的基本原理和实现方式，并通过示例代码了解如何实现一个简单的 Angular SSR 应用。希望本文能够对你学习 Angular SSR 技术有所帮助。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6509c25495b1f8cacd45c4ce