Angular 服务器端渲染的学习笔记

Posted 2021-08-24 JerryWang汪子熙

官网链接：https://angular.io/guide/universal

Angular Universal, a technology that renders Angular applications on the server.

Angular Universal 是一种将 Angular 应用渲染于服务器平台上的技术。

普通的 Angular 应用在浏览器里执行，响应用户动作，并以 DOM 的方式渲染页面。

Angular Universal 执行在服务器端，生成静态的应用页面，该页面随后在客户端进行引导(bootstrap).

服务器端渲染通常意味着应用程序的渲染速度更加快捷，允许用户在应用能够实现正常互动之前，就有机会一窥应用的布局。

google 有一篇专门讲 SSR 技术的文章：https://developers.google.com/web/updates/2019/02/rendering-on-the-web

使用 Angular CLI，可以完成一个应用支持 SSR 所需的准备工作，具体步骤通过 CLI Schematic 的 @nguniversal/express-engine 完成。

为了创建面向服务器端渲染的 app module, 即 app.server.module.ts， 执行下列 CLI 指令：

该指令会创建下列的文件结构：

本地使用 Universal 方式渲染应用的命令：npm run dev:ssr

执行的是 package.json scripts 区块里定义的该命令：

如果遇到错误消息：An unhandled exception occurred: Cannot find module ‘@nguniversal/builders/package.json’
Require stack:

先 npm install. 之后原始的错误消失。

一个 node.js express web 服务器，基于 Universal 编译 html 页面。

进行了很多编译动作：

整个 dist 文件夹和其子文件夹都是 npm run dev:ssr 后自动生成的：

打开 http://localhost:4200/dashboard，看到了熟悉的 hero dashboard:

基于 routerLinks 的跳转可以正常工作，因为其使用原生的 a 标签。

使用 SSR 的三大原因

1. Facilitate web crawlers through search engine optimization (SEO)

为了配合网络爬虫，实现搜索引擎优化。

2. Improve performance on mobile and low-powered devices

改善应用在移动端和低配设备上访问的性能。

3. Show the first page quickly with a first-contentful paint (FCP)

能够以 FCP 的方式，快速显示应用首页。

谷歌，Bing，Facebook 和其他社交媒体网站，都使用网络爬虫，为应用内容建立索引，以便让其内容能够在网络上被搜索到。

如果一个 Angular 应用具备高度的可交互性，那么网络爬虫可能很难像一个人类用户一样，采用导航的方式访问应用，并索引其内容。

Angular Universal 可以基于 Angular 应用，生成一个静态版本，易于被搜索，链接，以及不借助 javascript 进行导航。

同时也能让 site 预览成为可能，因为每个 url 返回的是完全渲染过后的页面。

有些设备不支持 JavaScript，或者支持程度很差，因此应用用户体验很难接受。

在这种情况下，我们需要一个服务器端渲染，不需要 JavaScript 也能运行的应用。

这种版本的应用，虽然功能局限，但是总比完全不能用的版本好。

Show the first page quickly

为了确保用户体验，迅速显示应用首屏页面的能力至关重要。

使用 Angular Universal，可以生成应用的初始页面，该页面和完整的应用相比外观上无区别，并且是纯粹的 HTML 代码，即使在 JavaScript 禁掉的浏览器上，也能正常显示。

该页面不支持浏览器事件，但支持基于 routerLink 的 site 间导航。

从操作层面说，我们可以提供应用初始页面的静态版本，以吸引用户的注意。