前言

标准的 Angular 应用运行在浏览器中，在 DOM 中渲染页面，响应用户的操作。 而Angular Universal 会在服务端运行，生成一些静态的应用页面，通过客户端进行启动。 这意味着该应用的渲染通常会更快。

熟悉后台开发的朋友应该对服务器端渲染比较熟悉，Java、php 这些开发语言，使用它们开发后台管理系统，都有对应的模板引擎，前端发出请求，后台把数据和模板引擎结合起来，然后编译成 html 页面，把编译好的页面返回给浏览器，直接展现出来。

服务器端渲染就是在后台生成相应的静态页面，通过客户端启动。

开始

1.新建项目

ng new server-render

2.进入项目

cd server-render

3.创建服务器端应用模块

ng add @nguniversal/express-engine --clientProject server-render

4.文件结构变化

运行

运行项目，执行一下命令

npm run build:ssr && npm run serve:ssr

可以感觉到，渲染速度提高了不少。

模拟网络比较慢的情况下的渲染速度

1. 打开 Chrome 开发者工具，进入 Network 标签页。
2. 选择 slow 3G

服务端渲染的应用仍然可以快速启动，但完整的客户端应用可能需要几秒钟才能加载完。

Universal 应用没有运行在浏览器上，因此不能使用浏览器特有的 api 和 一些特殊的能力。比如不能使用浏览器特有的全局对象，window、document、navigator 或者 location。

但是 Angular 提供了一套这些对象可注入的抽象层，比如 Location、DOCUMENT，他可以作为你所调用的 api 的等效替身。

同样，由于没有鼠标或者键盘事件，Universal 应用必须依靠客户端传递过来的请求决定要显示的内容。所以，把应用做成可路由的，是一种好方案。

Universal 应用中，发出的网络请求的地址必须是全路径的，不能使用相对路径。

为何需要服务器端渲染

1. 通过搜索引擎优化(SEO)来帮助网络爬虫。
2. 提升在手机和低功耗设备上的性能。
3. 迅速显示出第一个支持首次内容绘制(FCP)的页面。

Universal 模板引擎配置是在 server.ts 中，这个文件最重要的部分就是在 ngExpressEngine 这个函数

ngExpressEngine() 是对 Universal 的 renderModuleFactory() 函数的封装。它会把客户端请求转换成服务端渲染的 HTML 页面。 你还要在某个适用于你服务端技术栈的模板引擎中调用这个函数。

第一个参数是 AppServerModule。 它是 Universal 服务端渲染器和你的应用之间的桥梁。

第二个参数 extraProviders 是可选的。它能让你指定一些在服务端运行时特有的服务提供商。 只有当你的应用需要一些运行在服务器中才需要的信息时，才需要这么做。 比如这个运行中的服务器的源地址，当像前面例子中那样无法使用 Request 令牌时，可用它来计算 HTTP URL 的绝对地址。

这篇文章只是理论讲述，具体的实际用途将来在另一篇文章中讲解