前言
在今天的前端开发中，SPA (Single Page Application) 已经成为了一个很常见的架构。SPA 的特点是：所有的资源，包括 HTML、CSS、JS 等静态资源都通过一次网络访问获取到，并且只是改变 DOM 的内容来实现页面的交互。这种方式带来了一些优点，比如提高了用户体验。但是，这也带来了一些问题。其中最明显的问题之一就是 SEO（Search Engine Optimization） 问题。
在传统的前后端开发中，当 Web 用户搜索相关词语时，搜索引擎会通过爬虫程序自动抓取网站代码，进而进行索引。而在 SPA 中，由于所有内容都是通过 JS 动态生成的，不同搜索引擎根本无法正确爬取到真正的页面内容。而这种情况就极大地限制了搜索引擎检索到您的网站的能力，并降低了 Web 应用程序的流量。
为了解决这个问题，有一个通用的解决方案：SSR （Server Side Rendering，服务端渲染），它可以让你的应用程序在服务器端处理数据并生成 Web 页面来返回到浏览器，这样就可以让搜索引擎正确解析您的 Web 应用程序中的内容，并将其纳入检索范围。
本文将介绍如何利用 Angular 实现服务端渲染的功能，并提高 Web 应用的 SEO 性能。
Angular 服务端渲染
介绍
在 Angular 中，服务端渲染是通过 Angular Universal 来实现的。Angular 官方给出的定义是：Angular Universal 是 Angular 的一个扩展库，它允许你在服务器端实现应用程序的渲染，使用户可以更快地看到应用程序，改善 SEO。
Angular SSR 经过全面优化以缩短启动时间和关键渲染路径，使其非常适合开发任何需要 SEO 支持的应用程序。如果您的项目是大型的且有动态内容，可以利用 Angular SSR 实现服务端渲染。通过使用 Angular SSR 和 Universal ，可以在服务器上构建出完全渲染的版本，这将为 Web 应用程序提供 SEO 和性能优势。
实践
安装和配置
这里我们将以一个 Angular CLI 新项目的生成过程来开始我们的服务端渲染实践。
首先，我们需要确保 Node.js 版本大于等于 8.9 并安装 Angular CLI，创建一个名为“my-app”的新 Angular CLI 项目。
ng new my-app
接着，需要添加 @angular/platform-server 包。在模块的根目录 app.module.ts 中导入它，这是使 Angular 项目具有 SSR 能力的核心模块。
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - --------- - ---- ---------------
------ - ------------ - ---- ------------------
------ - ------------ - ---- ---------------------------
-----------
-------- -
------------------------------------ ------ -------- ---
-------------
---------
--
---------- --------------
--
------ ----- --------------- --注意，我们还要使用withServerTransition 来向 Angular 提供我们应用的唯一 ID ，这个 ID 将用于在客户端和服务端的加载期间传递状态信息。 appId 的内容必须在构建 Web 打包时与此处一致。
另外，我们需要告诉 Angular CLI 将我们的 app.module.ts 转化为 app.server.module.ts。
ng generate module app.server --module app.module
最后，现在我们需要修改 main.ts 文件，这是应用程序的主入口点，它将我们从浏览器应用程序转换为可以在服务器上工作的应用程序。我们需要将 bootstrapModule 修改为 bootstrapModuleFactory ，并且确保使用 AppServerModule。
-- -------------------- ---- ------- ------ - -------------- - ---- ---------------- ------ - --------------- - ---- ---------------------------- ------ - --------- - ---- ------------------- ------ - --------------- - ---- -------------------------- ----------------- ------------------------------------------------------------------ -- - ---------------------- -- ---------- ---
现在，我们已经完成了服务端渲染的基础框架。
服务端渲染组件并添加路由
一旦基本的 SSR 框架架构完成后，要使应用程序能够提供服务端渲染，就需要使用服务端渲染组件，这些组件是与具体路由相关的。Angular 提供了 Router 模块，使我们可以将路径映射到特定的组件。首先需要将 app.component.ts 中的成员变量改为 @Input(), 然后在对应的 template 模板文件中绑定数据。
app.component.ts
-- -------------------- ---- -------
------ - ---------- ----- - ---- ----------------
------------
--------- -----------
--------- -
----- ---------
-
--
------ ----- ------------ -
-------- ----- -------
-app.module.ts
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ------------ - ---- ------------------
------ - ------------ - ---- ------------------
-----------
-------- -
--------------
----------------------
- ----- --- ---------- ------------ --
- ----- ------- ------------- ------------------------------- --
--
--
------------- ---------------
---------- --------------
--
------ ----- --------- --上面的路由器配置为：
- an empty path, loads the root component (
AppComponent). - a
authpath, lazy loads a feature calledAuthModule.
下一步，我们创建一个 NameComponent ，并将其与 /name/:name 路由进行绑定。NameComponent 通过查询路由参数来呈现不同的屏幕输出。我们还必须为 NameComponent 添加客户端和服务器端的运行时，以使其在两个环境中均能工作。
name.component.ts
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - -------------- - ---- ------------------
------------
--------- -----------
--------- -
-------- -------------
-
--
------ ----- ------------- ---------- ------ -
----- -------
------------------- ------ --------------- --
---------- -
--------- - --------------------------------
-
-name.module.ts
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------ - ---- ------------------
------ - ------------ - ---- ------------------
------ - ------------- - ---- -------------------
-----------
------------- ----------------
-------- -
-------------
-----------------------
- ----- ------------- ---------- ------------- -
--
-
--
------ ----- ---------- --现在修改 app.server.module.ts，这里我们将 RouterModule 上的 forRoot() 修改为 forChild() 来更好地反映路由是在应用程序的特性模块上定义的。
app.server.module.ts
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - --------- - ---- ---------------
------ - ------------ - ---- ------------------
------ - ------------ - ---- ---------------------------
------ - ------------ - ---- ------------------
------ - ---------- - ---- ---------------------
-----------
-------- -
------------------------------------ ------ -------- ---
-------------
------------------------ - ------------------ --------- ---
----------
----------
--
---------- --------------
--
------ ----- --------------- --构建并运行
现在可以使用 Angular CLI 命令 build:ssr 来构建我们的应用程序。这个命令将会生成 dist/my-app-server 文件夹，其中包含我们的服务端应用程序，这个文件夹可以直接被部署到服务器上。
ng build --configuration=production --output-hashing=none ng run my-app:server
为了启动服务器，我们将使用 Express 库。可以使用如下代码：
server.ts
-- -------------------- ---- -------
------ -------------------------
------ - -------------- - ---- ----------------
------ - -- ------- ---- ----------
------ - -- ---- ---- -------
------ - ------------ - ---- -----
-- ------- ------
----- --- - ----------
----- ---- - ---------------- -- -----
----- ----------- - -------------------- -----------
----- -------- - ----------------------------------- --------------------------
------------------ --- -------- --------- -- -
----- ---- - - --------- --------- ---- --------------- --
--------------------------------------------- -----
---------- -- -------------- -------
---
------------- -------- --------
---------------- -------------
------------ --------------------------- - ------ ----- ----
------------ --- ---- -- -
------------------- - ---- --- ---
---
---------------- -- -- -
----------------- ------- ------ --------- -- ---------------------------
---现在，可以通过运行命令 ts-node server.ts 启动服务器，然后导航到 http://localhost:4000/ ，下面都将变为服务端渲染渲染渲染。
总结
Angular SSR（服务端渲染）允许开发者在服务端和客户端之间共享代码（Code Sharing）并使应用程序更易于索引服务，得到了提升。SSR 通过服务端生成首屏 HTML and CSS，限制性能损失，同时将添加给 Angular 应用的 Search Engine Optimization 功能。您可以使用 Angular CLI 轻松构建供 Node.js 和 Express 使用的应用程序。使用服务端渲染可提高 Web 应用的可访问性和可用性，最大限度地利用 Web 应用程序上的流量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a1055348841e9894d4b38d