Angular 的 TransferState 類使伺服器端渲染 (SSR) 和預渲染 (Prerendered-SSR) Angular 應用程式能夠使用從伺服器獲取的資料並且有效地在瀏覽器中渲染。

如果您使用的是 SSR 或預渲染應用程式策略，那麼該過程大致是這樣的：

- 在伺服器上預渲染或渲染應用程式
- 瀏覽器獲取呈現的 HTML 和 CSS 並顯示“靜態”應用程式
- 瀏覽器獲取、解析、解釋和執行 JavaScript
- Angular 應用程式被引導，用新的“正在執行”的應用程式替換整個 DOM 樹
- 應用程式已初始化，通常從遠端伺服器或 API 獲取資料
- 使用者與應用程式互動

這個場景有兩個問題：

- DOM hydration 會重複替換整個節點樹並重新繪製應用程式
- 應用程式會重複獲取理論上已經讀取過的資料，並由於 SSR 或預渲染站點策略而顯示給使用者

第一個問題是目前在 Angular 中沒有解決的問題，但是，第二個問題已經有了解決方案，這就是本文論述的 [Angular TransferState](https://brianflove.com/2020-06-05/angular-transfer-state/) 機制。

Transfer State 是一種策略：

- 使用 SSR 或預渲染策略獲取渲染完整“靜態”應用程式所需的資料
- 序列化資料，並使用初始文件 (HTML) 響應傳送資料
- 在應用程式初始化時，在執行時解析序列化資料，避免資料的冗餘獲取

從技術上講，資料透過 JSON.stringify() 序列化並透過 JSON.parse() 解析。但是，通常我們不需要擔心這一點，因為這是由 Angular 中的 TransferState 服務為我們執行的。

即使伺服器在 SSR 模式下工作，在 Chrome 瀏覽器 network 裡，仍然能觀察到 CMS OCC API 的呼叫。

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

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

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

已經開啟了 products 和 cms 的 ssrTransfer：
```javascript
ConfigModule.withConfig({
  state: {
    ssrTransfer: {
      keys: {
        products: true,
        cms: true
      }
    }
  }
});
```

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

- products：確實在客戶端沒有觀察到 OCC API 呼叫去讀取 product 資料。

- cms：預設情況下，每次 route 發生變化時，Spartacus 都會重新載入 CMS 頁面資料，不管它是否已經存在於 ngrx store 裡。

客戶可以透過修改配置項：Spartacus config routing.loadStrategy: RouteLoadStrategy.ONCE 來更改這個行為。

以上邏輯實現於 CmsPageGuard.shouldReload 方法裡。

關於 SAP 電商雲 Spartacus UI Transfer State 冗餘 API 請求傳送的討論

相關文章