本指南協助你在 Angular 應用程式的不同部分，選擇合適的渲染策略。
什麼是渲染策略？
渲染策略決定了你的 Angular 應用程式的 HTML 內容在何時、何地生成。每種策略在初始頁面載入效能、互動性、SEO 能力與伺服器資源使用量之間，都有不同的取捨。
Angular 支援三種主要的渲染策略：
- 用戶端渲染（CSR）：內容完全在瀏覽器中渲染
- 靜態網站生成（SSG/預先渲染）：內容在建置時期預先渲染
- 伺服器端渲染（SSR）：內容會在某個路由初次請求時，在伺服器上渲染
用戶端渲染（CSR）
CSR 是 Angular 的預設做法。內容會在 JavaScript 載入後，完全在瀏覽器中渲染。
何時使用 CSR
✅ 它很適合用於：
- 互動式應用程式（儀表板、管理介面）
- 即時應用程式
- SEO 不重要的內部工具
- 具有複雜用戶端狀態的單頁應用程式
❌ 在下列情況下，盡可能考慮避免使用：
- 需要 SEO 的公開內容
- 初始載入效能非常關鍵的頁面
CSR 的取捨
| 面向 | 影響 |
|---|---|
| SEO | 不佳：內容在 JavaScript 執行之前，爬蟲無法看見 |
| 初始載入 | 較慢：必須先下載並執行 JavaScript |
| 互動性 | 載入完成後立即可互動 |
| 伺服器需求 | 極低，僅需一些基本設定 |
| 複雜度 | 最簡單，因為只需要最少的設定即可運作 |
靜態網站生成（SSG/預先渲染）
SSG 會在建置時期預先渲染頁面，將其產出為靜態 HTML 檔案。伺服器會在初始頁面載入時，傳送已預先建置好的 HTML 內容。水合（hydration）完成後，你的應用程式便會像傳統的 SPA 一樣，完全在瀏覽器中執行，後續的導覽、路由變更與 API 呼叫，全都在用戶端進行，不需要伺服器進行渲染。
何時使用 SSG
✅ 它很適合用於：
- 行銷頁面與到達頁面
- 部落格文章與文件
- 內容穩定的產品目錄
- 不會依使用者而有所不同的內容
❌ 在下列情況下，盡可能考慮避免使用：
- 專屬於特定使用者的內容
- 經常變動的資料
- 即時資訊
SSG 的取捨
| 面向 | 影響 |
|---|---|
| SEO | 極佳：可以立即取得完整的 HTML |
| 初始載入 | 最快：使用預先生成的 HTML |
| 互動性 | 需要等到水合完成後 |
| 伺服器需求 | 供應內容時不需要伺服器（非常適合搭配 CDN） |
| 建置時間 | 較長：需要預先生成所有頁面 |
| 內容更新 | 需要重新建置並重新部署 |
📖 實作方式：請參閱 SSR 指南中的自訂建置時期的預先渲染。
伺服器端渲染（SSR）
SSR 會在伺服器端為某個路由的初次請求生成 HTML，提供兼顧動態內容與良好 SEO 的效果。伺服器會渲染 HTML，並將其傳送給用戶端。
一旦用戶端把頁面渲染出來，Angular 就會對應用程式進行水合，之後應用程式便會像傳統的 SPA 一樣，完全在瀏覽器中執行，後續的導覽、路由變更與 API 呼叫，全都在用戶端進行，不再需要額外的伺服器渲染。
何時使用 SSR
✅ 它很適合用於：
- 電子商務產品頁面（動態價格與庫存）
- 新聞網站與社群媒體資訊流
- 經常變動的個人化內容
❌ 在下列情況下，盡可能考慮避免使用：
- 靜態內容（改用 SSG）
- 伺服器成本是考量因素時
SSR 的取捨
| 面向 | 影響 |
|---|---|
| SEO | 極佳：為爬蟲提供完整的 HTML |
| 初始載入 | 快速：內容立即可見 |
| 互動性 | 會延遲到水合完成為止 |
| 伺服器需求 | 需要伺服器 |
| 個人化 | 可以完整存取使用者的上下文 |
| 伺服器成本 | 較高：會在某個路由初次被請求時進行渲染 |
📖 實作方式：請參閱 SSR 指南中的伺服器路由與撰寫與伺服器相容的元件。
選擇正確的策略
決策矩陣
| 如果你的需求是… | 請使用這個策略 | 原因 |
|---|---|---|
| 需要 SEO 與靜態內容 | SSG | 預先渲染的 HTML，載入速度最快 |
| 需要 SEO 與動態內容 | SSR | 能在某個路由初次被請求時提供最新內容 |
| 不需要 SEO 且重視互動性 | CSR | 最簡單，不需要伺服器 |
| 混合式需求 | 混合式（Hybrid） | 不同的路由可以使用不同的策略 |
透過水合讓 SSR/SSG 擁有互動性
當使用 SSR 或 SSG 時，Angular 會把在伺服器上渲染好的 HTML 進行「水合」，使其能夠互動。
可用的策略包括：
- 全量水合：整個應用程式一次全部變成可互動（這是預設做法）
- 漸進式水合：應用程式的各個部分，依需要逐漸變成可互動（效能更佳）
- 事件重播：在水合完成之前，先把使用者的點選動作捕捉下來
📖 了解更多：