概述
Angular 是一款流行的前端框架，能够帮助开发者快速构建出强大的单页面应用（SPA）。然而，SPA 也存在一些问题，比如首次加载时间较长、SEO 难度较高等问题。为了解决这些问题，Angular 提供了 Server-Side Rendering（SSR）的能力。
在本文中，我们将介绍如何在 Angular 中进行 SSR，包含以下主要内容：
- SSR 是什么以及为什么要使用它；
- 开始前的准备工作；
- 实现 SSR 的步骤和技巧；
- 示例代码；
- 总结与展望。
SSR 是什么以及为什么要使用它
SSR 即服务端渲染（Server-Side Rendering），是一种将 JavaScript 应用程序在服务器上渲染为 HTML 的技术。相比于传统的 SPA 应用，SSR 可以带来以下好处：
- 首次加载时间更短；
- 更好的 SEO 表现；
- 更好的可访问性（Accessibility）；
- 更好的性能，特别是在弱网络环境下。
考虑到这些好处，如果你的应用需要更好的性能和用户体验，那么应该考虑使用 SSR。
开始前的准备工作
在开始实现 SSR 之前，需要进行以下准备工作：
- 安装 Angular CLI：
npm install -g @angular/cli； - 创建一个 Angular 应用程序：
ng new my-app； - 安装 Angular Universal：
ng add @nguniversal/express-engine --clientProject my-app。
实现 SSR 的步骤和技巧
1. 实现服务端代码
Angular Universal 的 SSR 功能依赖于 Node.js，因此需要编写一个用于服务端渲染的文件。这个文件通常被称为「服务器入口文件」（Server Entry File），通常命名为 server.ts。
在 server.ts 文件中，我们需要完成以下任务：
- 引入一些必要的 Angular Universal 模块；
- 将 Angular 应用程序包装成一个 Express 中间件；
- 向 Express 应用程序添加一些路由；
- 启动服务器。
下面是一个简单的 server.ts 文件的实现：
-- -------------------- ---- -------
------ -------------------------
------ - -------------- - ---- ----------------
------ - ------------ - ---- ---------------------------
------ - -- ------- ---- ----------
------ - ------------ - ---- -----
-----------------
----- ---- - ---------------- -- -----
----- ---------- - ----------------------
----- --------- - ---------------------------------------- --------
----- - ------------------------ - - -------------------------------------
----- --- - ----------
------------------ --- -------- --------- -- -
----- ---- - -------------------------------------- -
--------- ----------
---- ----------------
---
-------------- ------
---
-------------- -------------------------- -
------- ----
----
------------ ----- ---- -- -
------------------- - --- ---
---
---------------- -- -- -
----------------- ------- ------ --------- -- ---------------------------
---2. 创建一个 Angular 模板
由于 SSR 的实现方式和 SPA 有所不同，你需要创建一个新的 Angular 模板，以便与 SSR 配合使用。这个模板应当包含以下几个文件:
src/main.server.ts：一个用于服务端渲染的 Angular 应用程序入口文件。src/app.server.module.ts：一个用于定义用于 SSR 的 Angular 模块。src/app.server.module.ts：一个用于定义用于 SSR 的 Angular 组件。
下面是一个简单的 Angular 模板：
-- -------------------- ---- ------- -- -------------- ------ - -------------- - ---- ---------------- ------ - ------------ - ---- --------------------------- ------ - ---------------- - ---- ------------------------------------------- ------ - --------------- - ---- -------------------------- ------ - -- ------- ---- ---------- ------ - ------------ - ---- ----- ----------------- ----- ---- - ---------------- -- ----- ----- ---------- - ---------------------- ----- --------- - ---------------------------------------- -------- ----- --- - ---------- ----- - ------------------------- --------------- - - ------------------ ------------------ --- -------- --------- -- - ------------------- - --- --- --- ---------------- -- -- - ----------------- ------- ------ --------- -- --------------------------- ---
-- -------------------- ---- -------
-- --------------------
------ - -------- - ---- ----------------
------ - ------------- ------------------------- - ---- ---------------------------
------ - --------- - ---- ---------------
------ - ------------ - ---- ------------------
-----------
-------- -
----------
-------------
--------------------------
--
---------- ---------------
--
------ ----- --------------- ---- -------------------- ---- -------
-- ----------------
------ - ---------- ------ - ---- ----------------
------------
--------- -----------
--------- -
---------- ------- --------
------ ------- ---- -- -- ----------- - --------------- ------
-
--
------ ----- ------------ ---------- ------ -
----------- - --- -------
---------- --
-在这个模板中，我们创建了一个简单的 Angular 组件，用于输出当前日期，并通过 src/app.server.module.ts 中的 AppServerModule 来定义我们需要用于 SSR 的模块和组件。
3. 将应用程序编译为服务器代码
在完成模板和服务端代码的编写后，我们需要将应用程序编译为服务器代码。这个过程通常可以通过运行以下命令来完成：
ng run my-app:server
一旦编译完成，你会得到一个名为 server.js 的文件，这是用于运行 SSR 的服务器代码。
4. 运行服务器
最后一步是运行服务器，以便在 web 浏览器中进行访问。你可以运行以下命令来启动服务器：
node server.js
这将启动一个 Node.js 服务器，监听本地的 4000 端口。打开浏览器并在地址栏中输入 http://localhost:4000 即可访问你的 SSR 应用程序。
示例代码
本节提供一个完整的 SSR 应用程序示例，你可以在这个示例中学习如何实现 SSR。
-- -------------------- ---- ------- ---- ---------- --- --------- ----- ----- ---------- ------ ----- ---------------- -------------- --- ------------ ----- --------- ----- --------------- ---------------------------- ----------------- ----- ---------- ------------------- ------------------- ------- ------ --------------------- ------- -------
-- -------------------- ---- -------
-- ---------
------ -------------------------
------ - -------------- - ---- ----------------
------ - ------------ - ---- ---------------------------
------ - -- ------- ---- ----------
------ - ------------ - ---- -----
-----------------
----- ---- - ---------------- -- -----
----- ---------- - ----------------------
----- --------- - ---------------------------------------- --------
----- - ------------------------ - - -------------------------------------
----- --- - ----------
------------------ --- -------- --------- -- -
----- ---- - -------------------------------------- -
--------- ----------
---- ----------------
---
-------------- ------
---
-------------- -------------------------- -
------- ----
----
------------ ----- ---- -- -
------------------- - --- ---
---
---------------- -- -- -
----------------- ------- ------ --------- -- ---------------------------
----- -------------------- ---- ------- -- -------------- ------ - -------------- - ---- ---------------- ------ - ------------ - ---- --------------------------- ------ - ---------------- - ---- ------------------------------------------- ------ - --------------- - ---- -------------------------- ------ - -- ------- ---- ---------- ------ - ------------ - ---- ----- ----------------- ----- ---- - ---------------- -- ----- ----- ---------- - ---------------------- ----- --------- - ---------------------------------------- -------- ----- --- - ---------- ----- - ------------------------- --------------- - - ------------------ ------------------ --- -------- --------- -- - ------------------- - --- --- --- ---------------- -- -- - ----------------- ------- ------ --------- -- --------------------------- ---
-- -------------------- ---- -------
-- --------------------
------ - -------- - ---- ----------------
------ - ------------- ------------------------- - ---- ---------------------------
------ - --------- - ---- ---------------
------ - ------------ - ---- ------------------
-----------
-------- -
----------
-------------
--------------------------
--
---------- ---------------
--
------ ----- --------------- ---- -------------------- ---- -------
-- ----------------
------ - ---------- ------ - ---- ----------------
------------
--------- -----------
--------- -
---------- ------- --------
------ ------- ---- -- -- ----------- - --------------- ------
-
--
------ ----- ------------ ---------- ------ -
----------- - --- -------
---------- --
-总结与展望
本文介绍了如何在 Angular 中实现 SSR，包括准备工作、步骤和技巧。通过学习本文，你应该已经了解了 SSR 的好处，并掌握了如何在 Angular 中实现 SSR 的方法。
SSR 不仅可以带来更好的性能和 SEO 表现，还可以提高用户体验和可访问性。随着 Angular 的不断发展，相信 SSR 功能的使用也将越来越广泛。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c6b38910032fedd38f0123