• 客戶端渲染（CSR）

• 伺服器端渲染（SSR）

• 靜態站點生成（SSG）

• 增量靜態再生（ISR）

客戶端渲染（Client-Side Rendering, CSR）

概念：

原理：

1. 瀏覽器載入 HTML 檔案（通常只有 <div id="app"></div>）。

2. 下載 JavaScript 檔案（例如 React、Vue、Angular 應用）。

3. JavaScript 在瀏覽器執行後，透過 API 取得數據並動態生成頁面內容。

4. 使用者可以與動態網頁互動，例如透過 Vue/React 的虛擬 DOM 進行 UI 更新。

優點：

• 互動性強：適合 SPA（單頁應用 Single Page Application），無需每次請求新頁面，使用體驗流暢。

• 減少伺服器負擔：伺服器只需傳送靜態文件，數據請求由客戶端發送 API 處理。

• 適合 PWA（漸進式網頁應用），可離線運行。

缺點：

• 初始加載時間長：首次載入需要下載較多 JavaScript 檔案，影響首屏渲染時間（First Paint）。

• SEO 不友好：搜尋引擎爬蟲可能無法正確索引動態生成的內容（需使用 SSR 或 Pre-rendering）。

• 可能影響低效能裝置：因為渲染主要由客戶端負責，低效能裝置可能會出現延遲或卡頓。

伺服器端渲染（Server-Side Rendering, SSR）

概念：

原理：

1. 使用者發送請求到伺服器。

2. 伺服器執行程式（如 Next.js、Nuxt.js、ASP.NET MVC、Django），從資料庫獲取數據並生成 HTML。

3. 伺服器將完整的 HTML 頁面傳送給瀏覽器，瀏覽器立即渲染內容。

4. 若使用框架如 Next.js，則 JavaScript 可進一步接管頁面並提供互動功能（Hydration）。

優點：

• 更快的首次渲染：完整 HTML 直接發送給瀏覽器，縮短白屏時間。

• SEO 友善：搜尋引擎能夠直接讀取完整的 HTML 頁面，提高索引效率。

• 適合內容驅動網站：如部落格、新聞網站、企業網站等。

缺點：

• 伺服器負擔較大：每個請求都需要伺服器處理並生成 HTML，比 CSR 負擔更重。

• 無法完全避免閃爍（Flickering）：在 Hydration（前端 JavaScript 掌控畫面）過程中，可能會有短暫的 UI 不同步。

• 延遲問題：因為每次都要請求伺服器，對於頻繁互動的應用（如聊天室、遊戲）可能會產生延遲。

靜態站點生成（Static Site Generation, SSG）

概念：

原理：

1. 在部署時，執行建置流程（如 Next.js getStaticProps()）。

2. 預先取得所有需要的數據並生成靜態 HTML 頁面。

3. 將靜態檔案部署到 CDN，當用戶請求時，直接提供靜態頁面。

優點：

• 速度最快：頁面是靜態的，不需要伺服器即時生成，載入極快。

• 低伺服器負擔：頁面已經建置完成，只需提供靜態檔案，適合高流量網站。

• SEO 友善：搜尋引擎可直接讀取靜態 HTML，提高索引效率。

缺點：

• 不適用於頻繁更新的網站：如果數據經常變動（如即時新聞、動態社群網站），需要頻繁重新建置，管理成本較高。

• 建置時間可能較長：如果有大量頁面需要生成，可能會影響部署速度。

增量靜態再生（Incremental Static Regeneration, ISR）

概念：

原理：

1. 當用戶訪問某個靜態頁面時，若該頁面過期（例如設定 60 秒過期），伺服器會在背景重新生成新的 HTML。

2. 伺服器將新的 HTML 存入快取，下次用戶訪問時直接獲取更新後的靜態頁面。

優點：

• 比 SSG 靈活：允許部分頁面動態更新，而不必重建整個網站。

• 比 SSR 更快：僅在特定條件下重新渲染，而非每次請求都運算。

• 適合需要部分即時更新的網站（如新聞網站、產品列表等）。

缺點：

• 更新延遲：新數據不會立即生效，而是根據預設的時間間隔更新。

• 較難管理：部分頁面可能仍然是舊的 HTML，容易導致不一致的問題。

各種渲染方式比較

結論

• SEO 與首屏速度重要 → 使用 SSR 或 SSG。

• 互動性高、類似 App 的網站 → 使用 CSR。

• 靜態內容為主的網站 → 使用 SSG。

• 希望減少伺服器負擔但仍要更新內容 → 使用 ISR。