儘管 [Universal](https://github.com/angular/universal/blob/main/docs/gotchas.md) 專案的目標是能夠在伺服器上無縫呈現 Angular 應用程式，但開發人員還是應該考慮一些注意事項。
 
首先，伺服器和瀏覽器環境之間存在明顯差異。 在伺服器上呈現時，您的應用程式處於 `ephemeral` 或者 Snapshot 狀態。

應用程式完全呈現一次，返回生成的 HTML，其餘應用程式狀態在下一次呈現之前被銷燬。

其次，伺服器環境本質上不具有與瀏覽器相同的功能（並且具有一些瀏覽器同樣不具有的功能）。 例如，伺服器沒有任何cookies 的概念。

固然開發人員可以 polyfill 來一定程度上規避這個問題，但是沒有完美的解決方案。

另請注意 SSR 的目標：改進應用程式的初始渲染時間。 這意味著應避免或充分防範任何可能降低此初始渲染中應用程式速度的情況出現。

一些 啟用 SSR 後的常見錯誤：

# window is not defined

使用 Angular Universal 時最常見的問題之一是伺服器環境中缺少瀏覽器全域性變數。 這是因為 Universal 專案使用 domino 作為伺服器 DOM 呈現引擎。 因此，伺服器上不會存在或不支援某些功能。 這包括視窗和文件全域性物件、cookie、某些 HTML 元素（如畫布）和其他幾個。 Domino 代表節點中的 DOM.

![在這裡插入圖片描述](https://img-blog.csdnimg.cn/76264207fef2447fb562c85eb809c20a.png#pic_center)

解決這個錯誤的一些思路：

通常，需要的全域性變數可以透過 Angular 平臺透過依賴注入 (DI) 獲得。 例如，全域性文件可透過 DOCUMENT 令牌獲得。 此外，透過 DOCUMENT 物件可以獲得 window 和 location 的非常原始的版本。 例如：

示例程式碼如下：

```typescript
import { Injectable, Inject } from '@angular/core';
import { DOCUMENT } from '@angular/common';

@Injectable()
export class ExampleService {
  constructor(@Inject(DOCUMENT) private _doc: Document) {}

getWindow(): Window | null {
    return this._doc.defaultView;
  }

getLocation(): Location {
    return this._doc.location;
  }

createElement(tag: string): HTMLElement {
    return this._doc.createElement(tag);
  }
}
```

使用 Angular Universal 進行伺服器端渲染避免 window is not defined 的錯誤訊息

相關文章