認識 SSR、CSR 與 SSG
前言H2
現今的前端框架百百種，如 React、Vue、Angular、Svelte 等等，但他們有分很多種不同的渲染方式，而我使用 Next.js 開發時一直都是簡單帶過，沒有深入了解，所以這篇文章就來認識 SSR、CSR 與 SSG 這三種主要渲染方式。
SSR (Server-Side Rendering)H2
用戶端（Client）每次請求網站資源時，SSR 會先在前端伺服器進行運算，產生完整的 HTML 內容後，再傳送給用戶端（Client）。
所以網站內容生成的大部分時間是在伺服器端完成，當用戶端接收到 HTML 內容後，就可以直接顯示，不用再進行其他運算。
- 缺點：每次請求都需要到伺服器端進行運算，會比較耗費伺服器資源
- 優點：SEO 效果比較好，因為內容已經在伺服器端生成了，搜尋引擎、社群平台爬蟲可以比較容易爬取到內容
適合：需要 SEO、內容需要即時更新的網頁（如：電商網站），或著需要登入的網頁（在伺服器端會比較方便管理）。
CSR (Client-Side Rendering)H2
用戶端（Client）每次請求網站資源時，CSR 幾乎不進行伺服器的額外運算，主要都是在前端。會先是回應一個空殼 HTML 給用戶端，然後再透過 JavaScript（通常是常見前端框架：React、Vue 等）進行運算，把內容渲染到頁面上。
- 缺點：SEO 效果比較差，第一時間搜尋引擎、社群平台爬蟲比較不容易爬取到內容
- 優點：可以有比較好的互動體驗，API 隨 Call 隨用
適合：比較不需要 SEO 的網頁（如：內部後台管理）
SSG (Static Site Generation)H2
SSG 是在 build 時就去把 HTML 運算好，直接生產靜態 HTML，最終可藉由 CDN 發送到客戶端。
- 缺點：無法即時更新，需要重新 build 才能更新內容
- 優點：載入速度非常快、SEO 效果比較好
適合：幾乎不需要變動的網頁（如：部落格文章、作品集、行銷頁面）
ISR (Incremental Static Regeneration)H3
增量靜態生成 ISR 是 SSG 的優化版本，由 Next.js 開發團隊所定義並推廣的術語。
允許頁面有一定的「有效期限」（例如 60 秒），過期後下一個訪問者仍然先拿到舊頁面，但背景會觸發重新生成，下一個人就拿到新的。兼顧速度和即時性。
其技術的背後採用 Stale-While-Revalidate (SWR) 策略。在 Nuxt.js 稱作 SWR / ISR Support。
- 缺點：不適合高度動態、具個人化資料
- 優點：相較於 SSG，可以更新內容，兼顧速度和即時性
適合：需要 SEO、內容需要即時更新的網頁（如：新聞、電商商品頁）
簡單總結H2
| 渲染方式 | 渲染時機或方式 | 優點 | 缺點 | 適合場景 |
|---|---|---|---|---|
| SSR | 伺服器 | SEO 效果好、內容即時 | 伺服器資源消耗大 | 電商網站、需要登入的頁面 |
| CSR | 瀏覽器 | 互動體驗好、API 隨 Call 隨用 | SEO 效果差、首次載入慢 | 部落格、作品集 |
| SSG | Build | 載入速度快、SEO 效果好 | 無法即時更新（ISR 可部分解決此問題） | 企業官網、行銷頁面 |
框架比較H3
React、Vue、Angular、Svelte 等前端框架單獨使用的話是預設 CSR
可藉由更進階一點的框架如：Next.js、Nuxt.js、SvelteKit 等框架，支援 SSR、SSG 等渲染方式，讓開發者可以更靈活地選擇適合的渲染方式。
前端渲染相關名詞解釋H2
- Prerender（預渲染）：本質上就是 SSG
- Hybrid Rendering（混合渲染）：指的是在一個專案中，針對不同頁面（Route）混合使用不同的渲染方式，例如：SSG + SSR、SSG + ISR 等等