如果配置得當，我們可以將所有的內容都在伺服器端渲染，避免在瀏覽器端再次呼叫 API.

![](https://img-blog.csdnimg.cn/img_convert/e436203cb58a2b8954e4ddd264a622f6.png)

首先命令列安裝 Angular Universal：
> ng add @nguniversal/express-engine

執行命令列 npm run build:ssr

![](https://img-blog.csdnimg.cn/img_convert/d79803020225d072f36e8f188f5c559c.png)

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

![](https://img-blog.csdnimg.cn/img_convert/e23ce67daa275f654fccd51578b4d246.png)

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) 完成。

![](https://img-blog.csdnimg.cn/img_convert/66f8e005d05a3fabb4e479a529e801a1.png)

檔案 src/main.ts 也已經自動被修改。

現在只有當瀏覽器丟擲 DOMContentLoaded 事件之後，Angular 應用才會被 bootstrap，此時 HTML 已經完全被解析完畢。

![](https://img-blog.csdnimg.cn/img_convert/ebc784b0d696376109c1bbfa4491a907.png)

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

透過 TransferState 機制，伺服器端 Angular 應用將資料透過生成的 HTML 原始碼，直接傳遞給瀏覽器端應用。

![](https://img-blog.csdnimg.cn/img_convert/bca7d1e6eb097d5e4b8e1d703e89a615.png)

```typescript
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 應用就能訪問從伺服器端傳輸的資料了。

Angular Universal 學習筆記

相關文章