本篇重點
- 了解客戶端渲染 (CSR)、伺服器端渲染 (SSR)、靜態網站生成 (SSG) 以及增量靜態再生(ISR) 的工作流程與渲染機制
- 了解 ISR 的生成範圍、再生成觸發條件
- 網頁渲染趨勢朝向混合渲染 (Hybrid Rendering) 發展
- 渲染架構決策樹
網頁應用程式的渲染（Rendering）架構，決定了內容從伺服器到使用者瀏覽器呈現的流程。每個模式各有其設計目的、工作流程與性能特性，選擇合適的架構對於網頁的載入速度、使用者體驗與搜尋引擎優化 (SEO) 非常重要。
CSR 客戶端渲染
Client-Side Rendering
概念
伺服器回傳最精簡的 HTML（無內容），瀏覽器下載 JS 後於前端渲染 DOM（生成內容），將內容的生成任務交給瀏覽器。
工作流程
- 使用者發送請求。
- 回傳 -> 載入精簡 HTML。
- JS bundle 下載。
- 前端執行 API 請求。
- 完成渲染。
優點
- 首次加載後，應用程式內頁面切換極快，因為瀏覽器不需重新請求整個頁面，僅需獲取數據。
- 低伺服器負載，伺服器只需提供 API 服務。
缺點
- 首次內容繪製 (FCP) 較慢，因為瀏覽器需要等待 JavaScript 載入並執行才能看到內容。
- SEO 不佳，因為搜尋引擎爬蟲可能無法完整抓取渲染後的內容。
使用時機
適用於高度動態、需要大量使用者互動且內容更新頻繁的應用（SPA 型應用），例如：儀表板應用、企業內部系統、SaaS 服務的管理介面，需要大量互動的應用。
SSR 伺服器端渲染
Server-Side Rendering
概念
每次請求都由伺服器即時執行完整的應用程式邏輯、獲取數據，並將渲染好的完整 HTML 返回瀏覽器，再載入並執行 JavaScript，讓頁面可以互動。
工作流程
- 使用者發送請求。
- 伺服器讀取資料。
- 渲染 HTML。
- 回傳頁面。
- 前端執行 JavaScript。
優點
- 可即時取得動態資料。
- SEO 友善，搜尋引擎爬蟲能直接讀取完整的 HTML 內容。
缺點
- 互動有延遲，使用者雖然看到內容，但 JavaScript 執行前無法互動。
- 伺服器負載重，每次請求都需要重新渲染。
使用時機
適用於內容是核心、強調 SEO 且需要即時數據的網站，例如：電子商務網站的商品頁面（價格與庫存需即時更新）、新聞網站、需要強大 SEO 表現的行銷網站。
SSG 靜態網站生成
Static Site Generation
概念
在構建 (build) 階段渲染生成對應的完整 HTML 文件、CSS 和 JavaScript 資源，部署到 CDN 後內容固定。當使用者請求頁面時，CDN 直接返回預先生成好的靜態文件。
工作流程
- Build 時取得資料。
- 產生靜態 HTML、CSS 和 JavaScript。
- 使用者從 CDN 直接下載。
優點
- SEO 表現優秀。
- 回應速度最快。
- 伺服器幾乎無運算負載。
缺點
- 內容更新需要重新構建 (Rebuild) 整個網站並重新部署。
- 頁面量大時 build 時間增加。
使用時機
適用於內容不常變動且追求高性能和低成本的網站，例如：資訊穩定的文件、部落格文章頁面。
健忘筆記
CDN（內容傳遞網路，Content Delivery Network）是一種分散式伺服器網路系統，其核心目的是加速網站內容的傳輸速度，讓全球各地的使用者都能快速存取網站內容。
ISR 增量靜態再生
Incremental Static Regeneration
概念
SSG 的擴充機制，解決 SSG 內容更新需要全局重新構建的問題，設定重新驗證間隔 (Revalidation Time) 後，可在背景更新靜態頁面。
工作流程
- Build 時取得資料。
- 產生靜態 HTML、CSS 和 JavaScript。
- 首次請求取得舊的靜態檔案。
- 若超過設定時間（revalidate），伺服器在背景重新生成頁面。
- 新版本靜態檔案生成後替換舊版本。
- 下次請求開始使用最新靜態檔案。
生成範圍
單頁或局部區塊。只重新生成需要更新的特定頁面或區塊，而不是重新構建整個網站，這大幅減少了構建時間和資源消耗。
Regenerate 觸發方式
- 基於時間 (Time-Based)：透過設定時間參數
revalidate，頁面在首次生成後會在指定的時間內（例如 60 秒）保持靜態。當時間到期後，下一次請求該頁面時，系統會在後臺觸發重新生成，並將更新的版本提供給後續使用者。若在時間到期後一直沒有使用者訪問該頁面，那麼頁面就會持續保持舊版本，直到下一次請求出現為止。 - 基於事件 (On-Demand)：通過 Webhook 或 API 呼叫，由 CMS 或後端服務主動通知應用程式進行特定頁面的再生。
健忘筆記
Regenerate 過程是在背景執行，使用者體驗不會因內容更新而中斷，能持續正常使用。
優點
- 保留 SSG 的快取速度與 CDN 優勢。
- 可定期更新資料（如 10 秒、1 分鐘）。
- 無需全局重新部署。
缺點
- 更新速度不是即時。
- 有機會出現短暫的舊資料。
使用時機
適用於內容會定期變更，但不需要即時更新，且需要保持高性能的網站，例如：大型內容網站 (數萬頁面但不需立即渲染)。
渲染模式比較
| 特性 | CSR | SSR | SSG | ISR |
|---|---|---|---|---|
| 何時產生 HTML | 客戶端產生 | 每次請求 | build | build + 背景重建 |
| 首次顯示速度 | 慢 | 中 | 最快 | 快 |
| SEO | 弱 | 強 | 強 | 強 |
| 更新能力 | 即時 | 即時 | 無 | 定期/手動 |
| 特點 | 高互動 SPA | 適合動態資料 | 適合穩定內容 | 大量頁面＋需更新 |
混合渲染
概念
當前的網頁渲染趨勢並非單一地偏向某一種架構，而是朝向混合渲染 (Hybrid Rendering) 發展，現代 Web 框架（Next.js、Nuxt）強調依頁面需求混合使用多種渲染方式。
同一個網站可同時包含：
- 高互動 SPA 區塊（CSR）
- 即時內容頁面（SSR）
- 靜態頁面（SSG）
- 定期更新頁面（ISR）
這種方式稱為「混合渲染」。
優點
- 效能最佳化，為每個頁面選擇最適合的渲染方式。
- 提升使用者體驗，關鍵頁面（如行銷頁、登陸頁）載入快，而互動性強的頁面（如儀表板）保持流暢。
- 確保需要 SEO 的內容得到有效索引
- 降低伺服器負載
缺點
- 架構複雜，必須理解多種渲染方式的差異，部署流程也更複雜。
- 需要更多觀察與監控，ISR 生成是否失敗，SSR 是否有延遲，CSR 客戶端 JS 是否過大
使用時機
- Blog / 行銷頁：SSG 搭配 CDN 以提升首次載入速度，少數需要更新的頁面再以 ISR 生成。
- 電商平台：商品列表與 SEO 重要頁面用 SSG 或 ISR，而購物車與結帳流程因涉及個人化與即時資料，多以 CSR 或 SSR 處理。
- 新聞網站：SSR 或 ISR 生成首頁以快速回應流量高峰，文章頁面則透過 ISR 兼顧速度與更新頻率。
- 使用者儀表板：若需要搜尋引擎可見性可選擇 SSR，若僅作為登入後內部使用則以 CSR 搭配 API 載入資料即可。
- 文件站（Docs）：SSG，提供高效、穩定且易於部署的架構。
渲染架構決策樹
是否需要 SEO 或首次可見內容非常重要？
SSG / ISR / SSR（若需要更新即時，使用 SSR 或 ISR）。
內容是否高度個人化？
SSR 或 CSR（若 SEO 重要 → SSR；若僅內部 app → CSR）。
內容更新頻率高，但想要靜態快取的好處？
ISR。
頁面數量超多（數萬頁）且不能每次 rebuild？
ISR。
管理後台、內部工具或高度互動的 UI？
CSR。
結論
依需求使用最適渲染策略，透過靜態生成、背景再生、伺服器渲染與客戶端渲染的搭配，讓網站能同時達到速度、SEO、維運彈性與互動性。
