乐趣区

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

如果配置切当,咱们能够将所有的内容都在服务器端渲染,防止在浏览器端再次调用 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 的原创文章,尽在:” 汪子熙 ”:

退出移动版