前言
SPA（Single Page Application）是现代 web 应用的主流，它通过 Ajax 技术实现页面的无刷新更新，给用户带来了更流畅的体验。但是，SPA 也带来了一些问题，比如 SEO 不友好、首屏加载慢等。针对这些问题，有一种被广泛提及的解决方案就是服务端渲染（Server Side Rendering，SSR），也就是在服务端渲染出页面，将 HTML 返回给客户端，而不是仅返回一个入口文件，交给浏览器去加载和渲染。
AngularJS 是一个流行的前端框架，也支持 SPA 架构。在本文中，将介绍如何使用 AngularJS 构建一个具有服务端渲染的 SPA。
准备工作
在开始之前，需要安装以下软件：
- Node.js（v8+）
- AngularJS（v1.x）
- Angular Universal（v6+）
Node.js 是必须的，AngularJS 是开发服务端渲染的前提，Angular Universal 是一个官方维护的库，提供了服务端渲染的支持。
AngularJS 项目搭建
首先，需要创建一个 AngularJS 项目。可以通过 AngularJS 官网上提供的 快速起步 来创建。
在项目中，可以创建一些页面组件，比如 HomeComponent 和 AboutComponent。这些组件都会被包含在 AppComponent 中，类似于下面这样：
-- -------------------- ---- -------
---- ------------------ ---
---- -------------- ------------------------
------ ----- -------
-----
-- --------------------------
-- ----------------------------
------
-------------------
------其中 ng-view 就是 AngularJS 中的占位符，用于在路由请求改变时展示不同的组件。
服务端渲染配置
使用 Angular Universal 提供的库来实现服务端渲染。首先需要安装依赖：
npm install @angular/platform-server express @nguniversal/module-map-ngfactory-loader --save
然后，需要在客户端和服务端上分别创建一个 AppServerModule 模块。这个模块将与 AppModule 模块相关联，并在服务端使用。
-- -------------------- ---- -------
-- --------------------
------ - -------- - ---- ----------------
------ - ------------ - ---- ---------------------------
------ - --------------------- - ---- -------------------------------------------
------ - ------------ - ---- ------------------
------ - --------- - ---- ---------------
------ - ------- ------------ - ---- ------------------
----- ------- ------ - -
- ----- --- ---------- ------------ --
-- ----- ---------
--
-----------
-------- -
----------
-------------
----------------------
---------------------------- - ------------------ --------- --
--
---------- ---------------
--
------ ----- --------------- --可以看到，我们在 AppServerModule 中导入了 ServerModule 和 ModuleMapLoaderModule，并在 imports 数组中加入了 AppModule 和 RouterModule（这里默认加入 AppComponent 组件，如果有其他的路由，也需要在此处添加）。
在服务端，需要创建一个 server.js 文件，启动 Express 服务器，并使用 AppServerModule 作为入口模块。
-- -------------------- ---- -------
-- ---------
----- ------- - -------------------
----- - --------------- - - ---------------------------------------
----- - ------------------------ - - ------------------------------
----- --- - ----------
------------------ -----------------
---------- ------------------------
----
------------- -------- --------
---------------- ----------
------------ ----- ---- -- -
------------------- -
----
---
---
---
---------------- -- -- -
------------------- ------- -- -----------------
---可以看到，在 server.js 中使用了 ngExpressEngine 来绑定 AppServerModuleNgFactory，并为 Express 设置了渲染视图的引擎。同时，设置了路由规则为 *，即匹配所有路由请求，返回 index.html 页面。
需要注意的是，服务端渲染的入口文件是 index.html 而不是 SPA 中的入口文件 index.html。所以，需要将 SPA 中的入口文件复制一份作为服务端渲染的入口文件，并命名为 static/index.html。
构建打包
完成了服务端渲染的配置后，需要对应用进行构建和打包。
先执行 Angular Universal 提供的 generate 命令，生成一些服务端渲染需要用到的文件和模块。
ng generate universal --client-project {clientProjectName} --name {myProjectName}其中 --client-project 指定了客户端项目的名称，默认为 app；--name 指定了服务端渲染项目的名称，默认为 server。
接着，执行 build:ssr 命令进行构建和打包：
ng build --prod && ng run app:server:production
这个命令将会在 dist 目录下生成客户端和服务端两份打包文件。
运行
在打包完成之后，即可通过命令行运行服务端：node server.js 启动 Express 服务器。
如果一切顺利，在浏览器中就可以访问服务端渲染的 AngularJS SPA 了！
总结
本文介绍了如何在 AngularJS 中使用 Angular Universal 实现服务端渲染。服务端渲染的实现和配置需要对 AngularJS 有一定的理解，同时还需要一些 Node.js 的知识。通过服务端渲染，可以提升网站的首屏加载速度，同时增强 SEO 效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649d1fc548841e98949d78be