將從 定義、流程、優缺點和適用場景 四個方面詳細說明它們的區別。

---

一、核心定義

縮寫	英文	中文	核心思想
CSR	Client-Side Rendering	客戶端渲染	服務器發送一個空的 HTML 殼和 JavaScript bundle，由瀏覽器下載并執行 JS 來渲染內容。
SSR	Server-Side Rendering	服務端渲染	服務器在每次請求時，動態生成并填充數據的完整 HTML 頁面，然后發送給瀏覽器。
SSG	Static Site Generation	靜態站點生成	在項目構建時，就預先生成好完整的、帶內容的 HTML 頁面。服務器直接返回這些現成的文件。

---

二、詳細流程對比

為了更直觀地理解三者的區別，下圖展示了從用戶請求到頁面展示的完整流程差異：

通過上圖流程可以清晰地看到：

• CSR 的“白屏時間”最長，因為需要等待 JS 下載、執行并完成數據抓取后才會渲染內容。
• SSR 和 SSG 都能快速呈現初始內容，因為它們直接向瀏覽器提供了完整的 HTML。兩者的核心區別在于 HTML 的生成時機：SSR 是“動態生成”，而 SSG 是“預先構建”。

---

三、優缺點對比

	CSR	SSR	SSG
優點	1. 前后端分離，開發模式清晰。 2. 服務器壓力小，資源消耗低。 3. 首次加載后，后續頁面切換極快（SPA體驗）。	1. 首屏加載快，用戶體驗好。 2. SEO 友好，搜索引擎可直接抓取。 3. 社交分享預覽效果好。	1. 性能極致，速度最快（可從CDN分發）。 2. 安全性高，無服務器端邏輯。 3. SEO 友好。 4. 部署簡單、成本低。
缺點	1. 首屏加載慢，白屏時間長。 2. SEO 不友好，爬蟲難以抓取。 3. 社交分享預覽內容為空。	1. 服務器壓力大，每次請求都渲染。 2. 開發復雜度高，需考慮服務端環境。 3. TTI可能較慢，注水完成前無法交互。	1. 不適用于高度動態內容（如 dashboard）。 2. 數據變化需重新構建整個站點。

---

四、如何選擇？適用場景是什么？

• 選擇 CSR 如果：

  • 你的應用是后臺管理系統、Dashboard 等對 SEO 毫無要求的場景。
  • 你非常看重 SPA 的流暢交互體驗，且用戶不會頻繁刷新頁面。

• 選擇 SSR 如果：

  • 你的應用是內容型網站（新聞站、博客、電商商品頁），SEO 和首屏速度是生命線。
  • 你需要為每個用戶或每次請求生成個性化內容（如用戶儀表盤）。
  • 你愿意承擔更高的服務器成本和開發復雜度。（Next.js, Nuxt.js 等框架極大地降低了復雜度）

• 選擇 SSG 如果：

  • 你的網站內容主要是靜態的，數據不會頻繁變更（文檔、博客、公司官網、營銷落地頁）。
  • 你追求極致的性能、安全性和低廉的托管成本。
  • 你甚至可以接受在內容更新后等待一段構建時間。（Next.js, Gatsby, VuePress, Hugo 等都是優秀的SSG框架）

現代框架的融合趨勢

值得注意的是，像 Next.js 這樣的現代框架并不強迫你只選擇一種模式，而是支持混合模式（Hybrid）：

• 你可以將大部分頁面設置為 SSG（如博客文章、產品頁）。
• 將少數需要服務器渲染的頁面設置為 SSR（如用戶訂單頁）。
• 同時保留 CSR 的交互體驗（如網站后臺）。

這種“量體裁衣”的方式，讓你能為每個頁面選擇最合適的渲染策略，從而在性能、SEO和開發體驗上取得最佳平衡。