乐趣区

关于angular:Angular-Universal-学习笔记

jiezi

如果配置切当，咱们能够将所有的内容都在服务器端渲染，防止在浏览器端再次调用 API.

首先命令行装置 Angular Universal：

ng add @nguniversal/express-engine

执行命令行 npm run build:ssr

  • 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:

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) 实现。

文件 src/main.ts 也曾经主动被批改。

当初只有当浏览器抛出 DOMContentLoaded 事件之后，Angular 利用才会被 bootstrap，此时 HTML 曾经齐全被解析结束。

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

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

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 的原创文章，尽在：” 汪子熙 ”:

退出移动版