SSR vs CSR vs SSG：怎麼選？
三種渲染模式
CSR（Client-Side Rendering）客戶端渲染
瀏覽器收到空 HTML → 載入 JS → JS 渲染畫面
1. 伺服器回傳：<div id="app"></div> + <script src="bundle.js">
2. 瀏覽器下載 bundle.js（可能 500KB+）
3. JS 執行，建立 DOM，畫面才出現
4. 使用者看到畫面（可能已經過了 2-3 秒）
| 優點 |
缺點 |
| 互動體驗好（SPA） |
首屏慢（要等 JS 載入+執行） |
| 伺服器負擔小 |
SEO 差（爬蟲看到空 HTML） |
| 前後端完全分離 |
需要 Loading 狀態 |
SSR（Server-Side Rendering）伺服器端渲染
伺服器渲染完整 HTML → 瀏覽器直接顯示 → 載入 JS → 變成互動式
1. 伺服器執行 React/Vue，產生完整 HTML
2. 瀏覽器收到 HTML，立刻顯示（首屏快）
3. JS 載入後 "Hydration"（注入互動性）
4. 變成完整的 SPA
| 優點 |
缺點 |
| 首屏快（HTML 直接顯示） |
伺服器負擔大（每次請求都要渲染） |
| SEO 好（爬蟲看到完整內容） |
開發複雜（要處理 Server/Client 差異） |
| 社群分享有預覽 |
TTFB 較慢（伺服器要花時間渲染） |
SSG（Static Site Generation）靜態生成
建置時就產生所有 HTML → 部署靜態檔案 → CDN 分發
1. 建置時（build time）：執行每個頁面，產生 .html 檔案
2. 部署到 CDN（Vercel、Cloudflare Pages）
3. 使用者請求 → CDN 直接回傳 HTML（超快）
| 優點 |
缺點 |
| 最快（靜態檔案 + CDN） |
不適合動態內容（使用者資料） |
| 最安全（沒有伺服器） |
建置時間隨頁面數量增加 |
| 最便宜（不需要伺服器） |
更新需要重新建置 |
怎麼選？
| 場景 |
推薦 |
| 部落格、文件網站 |
SSG（Astro、Hugo） |
| 電商、新聞網站 |
SSR（Next.js、Nuxt） |
| 後台管理系統 |
CSR（Vite + React/Vue） |
| 學習平台（DevLearn） |
MVC SSR（你現在的做法）✅ |
你的 DevLearn 用 ASP.NET MVC 是 Server-Side Rendering，Razor 在伺服器渲染 HTML。這對 SEO 和首屏速度都很好。