如果配置得當，我們可以將所有的內容都在服務器端渲染，避免在瀏覽器端再次調用 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的原創文章，盡在：“汪子熙”:

總結

以上是生活随笔為你收集整理的Angular Universal 学习笔记的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。