前端渲染模式大比拼：SSR vs SSG vs SPA

前言

最近在學習 Nuxt3，它是一個基於 Vue.js 的框架，提供了強大的功能來建構現代化的 Web 應用。其中最吸引我的就是它對不同渲染模式的支援，特別是伺服器端渲染（SSR）。在深入 Nuxt3 之前，我想先好好了解一下幾種常見的網頁渲染模式：SPA、SSR 和 SSG。這篇文章將會是我學習這幾個概念的筆記。

網頁渲染模式簡介

在現代網頁開發中，我們主要有三種渲染模式：

SPA (Single-Page Application - 客戶端渲染 CSR)：單頁應用程式，內容在瀏覽器端渲染。
SSR (Server-Side Rendering - 伺服器端渲染)：內容在伺服器端渲染成 HTML 後再傳送到瀏覽器。
SSG (Static Site Generation - 靜態網站生成)：在建置時期就預先產生所有頁面的 HTML 檔案。

這三種模式各有優缺點，適用於不同的應用場景。接下來讓我們一一探討。

SPA (Single-Page Application)

SPA 是目前前端開發的主流模式之一，像我們熟悉的 Vue、React、Angular 等框架，預設都是以 SPA 模式運作。

SPA 運作方式

初始請求：瀏覽器第一次向伺服器請求頁面時，伺服器會回傳一個幾乎空白的 index.html 檔案，以及打包好的 JavaScript 和 CSS 檔案。
客戶端渲染：瀏覽器下載完 JavaScript 後，開始在客戶端執行，透過 JavaScript 動態產生頁面內容（DOM），並掛載到 index.html 的根節點上。
後續導航：當使用者點擊連結切換頁面時，並不會向伺服器重新請求整個頁面。而是透過前端路由（如 vue-router）來攔截請求，動態更新頁面內容，提供流暢如原生應用程式般的使用者體驗。

SPA 優點

使用者體驗佳：頁面切換快速、流暢，沒有傳統多頁應用的白畫面等待時間。
伺服器負擔小：伺服器只需提供靜態資源和 API，渲染工作交給客戶端，減輕了伺服器壓力。
前後端分離：開發模式清晰，前端專注於 UI/UX，後端專注於 API，方便團隊協作。

SPA 缺點

**首次載入速度慢 (FCP 慢)**：需要下載完整的 JavaScript 檔案後才能渲染頁面，導致使用者看到畫面的時間（First Contentful Paint）較長。
SEO 不佳：搜尋引擎爬蟲可能無法正確執行 JavaScript，導致抓取到的頁面是空白的，不利於搜尋引擎排名。雖然現在 Google 爬蟲已經能更好地處理 JavaScript，但這仍然是一個潛在問題。

SSR (Server-Side Rendering)

為了解決 SPA 的問題，SSR 應運而生。Nuxt3 和 Next.js 這類框架讓 SSR 的實作變得更加簡單。

SSR 運作方式

初始請求：瀏覽器向伺服器請求頁面。
伺服器端渲染：伺服器接收到請求後，會在後端環境（如 Node.js）執行前端框架的程式碼，將對應的頁面元件渲染成完整的 HTML 字串。
回傳 HTML：伺服器將渲染好的 HTML 回傳給瀏覽器。
**Hydration (注水)**：瀏覽器顯示 HTML 內容後，會接著下載 JavaScript 檔案。JS 執行後會將事件監聽器、狀態等附加到現有的 DOM 上，讓頁面變成一個可互動的 SPA。這個過程稱為 “Hydration”。

SSR 優點

**首次載入速度快 (FCP 快)**：瀏覽器直接接收到完整的 HTML，可以立即顯示內容，使用者能更快看到頁面。
SEO 友善：回傳給爬蟲的是完整的 HTML，有利於搜尋引擎索引。

SSR 缺點

伺服器負擔大：每個請求都需要在伺服器上即時渲染，對伺服器造成較大壓力。
開發複雜度高：需要考慮程式碼在伺服器和客戶端兩種環境下的執行情況，例如 window、document 等瀏覽器專屬的 API 只能在客戶端使用。

SSG (Static Site Generation)

SSG 結合了 SSR 和 SPA 的部分優點，它在「建置階段」就產生所有頁面的靜態 HTML 檔案。

SSG 運作方式

建置階段：在部署前，透過框架的 build 指令，抓取所有需要的資料，並為每個頁面產生一個對應的 HTML 檔案。
部署：將這些產生的靜態檔案（HTML, CSS, JS）部署到任何靜態網站託管服務上，例如 GitHub Pages, Netlify, Vercel 或 CDN。
使用者請求：使用者請求頁面時，伺服器直接回傳對應的靜態 HTML 檔案，無需任何後端渲染。

SSG 優點

效能極致：因為頁面是預先渲染好的，回應速度最快。
安全性高：沒有後端資料庫或即時渲染邏輯，減少了被攻擊的風險。
成本低廉：可以部署在便宜甚至免費的靜態託管服務上。
SEO 友善：與 SSR 一樣，提供完整的 HTML 內容。

SSG 缺點

更新延遲：如果網站內容頻繁變動（例如新聞網站、論壇），每次更新都需要重新建置整個網站，可能耗時較長。
不適用於動態內容：不適合需要根據使用者互動即時產生內容的頁面（例如個人化儀表板）。

Nuxt3 中的渲染模式

Nuxt3 提供了靈活的設定，讓你可以輕鬆在這些模式之間切換：

**通用渲染 (Universal Rendering)**：預設模式，結合了 SSR（首次載入）和 CSR（後續導航）。
**客戶端渲染 (CSR/SPA)**：在 nuxt.config.ts 中設定 ssr: false 即可切換為 SPA 模式。
**靜態網站生成 (SSG)**：執行 nuxi generate 指令來建置專案，Nuxt 會為你的頁面產生靜態檔案。

總結

特性	SPA (CSR)	SSR	SSG
渲染位置	瀏覽器	伺服器 (每次請求)	伺服器 (建置時)
首次載入速度	慢	快	最快
SEO	差	好	好
伺服器負擔	低	高	無 (靜態伺服器)
適用場景	後台管理、Web 應用	新聞、電商、內容網站	部落格、文件、作品集