Angular Universal 学习笔记

如果配置得当,我们可以将所有的内容都在服务器端渲染,避免在浏览器端再次调用 API.

Angular Universal 学习笔记_第1张图片

首先命令行安装 Angular Universal:

ng add @nguniversal/express-engine

执行命令行 npm run build:ssr

Angular Universal 学习笔记_第2张图片

  • browser:是执行命令行 ng build — prod 之后的结果。
  • server folder: 是执行命令行 ng run PROJECT_NAME:server:production 的结果。

运行命令行 npm run serve:ssr, 这会启动 Node.js Express 服务器,endpoint 来自 server.ts.

如何避免 server 和 client 重复调用 API?

  • import TransferHttpCacheModule and BrowserTransferStateModule into AppModule
  • import ServerTransferStateModule into AppServerModule

检查服务器返回的 HTML 源代码,发现包含了 serverApp-state:

Angular Universal 学习笔记_第3张图片

src/app/app.server.module.ts 这个文件是自动生成的,定义了运行在服务器端 Angular 应用的 Root module.

AppServerModule 导入了 AppModule,以后者 addon 的形式进行工作,确保 AppModule 不会被修改。

AppServerModule 的职责:

  • disables animation by NoopAnimationsModule.
    很显然,服务器端运行的 Angular 应用不需要动画效果。
  • disables handling of scrolling by Angular
  • 修改了 HTTP 请求的调用方式。

浏览器端的 HTTP API 调用采取 XMLHttpRequest 实现,而服务器端的 API 调用通过 xhr2 (XMLHttpRequest Emulation for node.js) 完成。

Angular Universal 学习笔记_第4张图片

文件 src/main.ts 也已经自动被修改。

现在只有当浏览器抛出 DOMContentLoaded 事件之后,Angular 应用才会被 bootstrap,此时 HTML 已经完全被解析完毕。

Angular Universal 学习笔记_第5张图片

TransferState — mechanism of how server-side Angular application can transfer data to browser application directly inside generated Html.

通过 TransferState 机制,服务器端 Angular 应用将数据通过生成的 HTML 源代码,直接传递给浏览器端应用。

Angular Universal 学习笔记_第6张图片

BrowserModule.withServerTransition({ appId: ‘serverApp’ })

上面代码内的 withServerTransition 方法也用于进行 TransferState 机制处理。

appId 属性用于让浏览器知道哪一个 DOM 元素是在服务器端添加的。

How TransferState works

没有引入 TransferState 机制之前的流程

(1) SSR Node.js 服务器收到浏览器发送的请求

(2) SSR 服务器调用 API,读取业务数据,渲染页面。将渲染结果发送回浏览器。

(3) Angular 应用在浏览器端启动,然后再次调用 API.

TransferState 机制就一句话:

server application caches API responses directly in generated HTML, a browser checks cached responses before doing a real API call.

服务器端应用将 API 响应直接缓存在生成的 HTML 代码里,浏览器在发送 API 之前,先检查 cached 响应。

TransferState 机制的几个组成部分:

  • TransferState:服务提供者,一个键值存储结构。
  • ServerTransferStateModule — import into app.server.module.ts .

该 module 在服务器应用里创建了一个 TransferState provider. 并且 get transfer state storage content,转换成 text 格式,将其存储到 script 元素里。

  • TransferHttpCacheModule — import into app.module.ts.

这个 module 提供了一个 interceptor,能将 API 调用的响应数据缓存到 transfer state 中,并避免不必要的重复 API 调用。

  • BrowserTransferStateModule — import into app.module.ts.

从服务器应用中读取 transferred state,也就是 script 元素中的数据,解析,并创建 Transfer State provider 实例。这一切就绪后,Angular 应用就能访问从服务器端传输的数据了。

更多Jerry的原创文章,尽在:"汪子熙":
Angular Universal 学习笔记_第7张图片

你可能感兴趣的