随着现代 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，需要按照以下步骤进行操作：
- 创建 Angular 应用
首先需要创建一个 Angular 应用。可以使用 Angular CLI 工具来创建应用：
ng new my-app
- 安装 @angular/platform-server 模块
npm install @angular/platform-server
- 创建服务器端应用
创建一个服务器端应用，用于处理客户端的请求。可以使用 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')));
- 处理客户端请求：
-- -------------------- ---- -------
------------ ----- ---- -- -
----- -------- - ---------------------------- ------- --------------------------
----- --- - ------------ - ----- - --------------- - ----------------
--------------------------------------------- -
--------- ---------
---- ----
--------------- -
---------------------------------
-
------------ -- -
---------------
---
---- 编译 Angular 应用
使用以下命令来编译 Angular 应用：
ng build --prod && ng run my-app:server
这将会生成一个 dist 目录，其中包含编译后的客户端和服务器端应用。
- 启动服务器端应用
使用以下命令来启动服务器端应用：
node dist/my-app-server/main.js
这将会启动服务器端应用，并监听来自客户端的请求。
示例代码
下面是一个简单的 Angular SSR 应用示例代码：
-- -------------------- ---- -------
-- -------------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ------------ - ---- ------------------
-----------
------------- ---------------
-------- ----------------
---------- --------------
--
------ ----- --------- -
-
-- ----------------
------ - --------- - ---- ----------------
------------
--------- -----------
--------- -
---------- -- ---- --------
--
--
------ ----- ------------ -
---- - ----------
-
-- ---------
------ -------------------------
------ - ------------------- - ---- ---------------------------
------ - ---------------- - ---- -------------------------------------------
------ - ------------ - ---- -----
------ - ---- - ---- -------
------ - -- ------- ---- ----------
------ - -------------- - ---- ----------------
------ - ------------------------- --------------- - ---- ----------------------------
-----------------
----- --- - ----------
-------------------------------------- ----------
------------ ----- ---- -- -
----- -------- - ---------------------------- ------- --------------------------
----- --- - ------------ - ----- - --------------- - ----------------
--------------------------------------------- -
--------- ---------
---- ----
--------------- -
---------------------------------
-
------------ -- -
---------------
---
---
---------------- -- -- -
------------------- ------- -- ------------------------
---总结
Angular SSR 技术可以提高 Web 应用的性能和用户体验，同时也可以提高应用的可访问性和可用性。通过本文的介绍，你可以了解到 Angular SSR 的基本原理和实现方式，并通过示例代码了解如何实现一个简单的 Angular SSR 应用。希望本文能够对你学习 Angular SSR 技术有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6509c25495b1f8cacd45c4ce