# Angular Universal

## 基本介紹
預設情況下，Angular 僅在瀏覽器中呈現應用程式，Angular Universal 允許 Angular 在伺服器端渲染應用程序，產生靜態HTML的內容。

相較於過去的版本使用ssr時客戶端每次畫面切換時就會閃爍一次的問題
(因為客戶端從server拿回來靜態html後，會捨棄所有DOM重新生成，所以就會有閃爍的問題)

由於使用了**Client Hydration**，一旦HTML內容在瀏覽器中呈現，Angular就會引導應用程式並重複使用伺服器產生的HTML中的可用資訊。

## Client Hydration (client-side hydration)
hydration這個詞字面翻譯就是"注水"、"補水"的意思，由server發給client的靜態檔裡面DOM是乾瘪、不可交互的，由client給它補水、變成可交互的，讓DOM不需要重新創建而是直接使用server發過來的，也就不會有閃爍問題了。

## 引入步驟
[官網參考連結](https://angular.io/guide/ssr)
1. 執行以下命令將SSR新增到專案中

ng add @nguniversal/express-engine

2. 啟用Client Hydration

import {provideClientHydration} from '@angular/platform-browser';
// ...

@NgModule({
  // ...
  providers: [ provideClientHydration() ],  // add this line
  bootstrap: [ AppComponent ]
})
export class AppModule {
  // ...
}

3. 啟動server
若要開始在本機系統上使用 Universal 渲染應用程序，請使用下列命令。

npm run dev:ssr

## 相關補充
1. 在使用setInterval、setTimeout上要注意，若是用在constructor或是angular的lifecycle上時，server端會等待這個異步動作完成才會返回結果給前端

2. 若是有使用Client Hydration，異步請求使用上(像是http請求)要注意，因為hydration的機制會把在server端取到的值傳給前端，當再次走到這邊時會直接取緩存值來用，若是不希望http取緩存值，可以使用withNoHttpTransferCache()

import {provideClientHydration, withNoHttpTransferCache} from '@angular/platform-browser';
// ...

@NgModule({
  // ...
  providers: [ provideClientHydration(withNoHttpTransferCache()) ], // add this setting
  bootstrap: [ AppComponent ]
})
export class AppModule {
  // ...
}

<br>

3. 遇到一個狀況是，前端的狀態是登入後的，預期header不會有登入按鈕，但server端由於沒有該狀態所以render返回的頁面是有登入按鈕的，而且前端重新init後這個登入按鈕居然沒被移除，反而和登入後的狀態同時顯示。



這邊最後是使用**ngSkipHydration**，他可以加在你不希望覆用server端renderer的component上，讓這個component在client端重新生成，最後才解決這個問題的