什麼是SPA?

SPA (Single Page Application，單頁應用) 是一種網頁應用的架構，整個網站只有一個 HTML頁面，使用者操作時不會整頁重新載入，而是透過 JavaScript + AJAX / Fetch API 來動態更新內容

• 首次載入：伺服器回傳一個 index.html 和打包好的 JS、CSS
• 後續操作：頁面不會重新跳轉，而是透過前端框架（React、Vue、Angular）攔截路由、更新畫面

優點：

• 使用者體驗流暢，切換頁面不用重新載入整個 HTML
• 前後端分離
• 透過 API 與後端互動

缺點：

• SEO 不友善（因為是動態生成的，搜尋引擎看到的初始頁幾乎是空的）
• 首次載入成本高（JS bundle 較大）
• 部署上需要設定伺服器路由（避免重新整理時找不到頁面）
  • 下方程式碼是設定路由root路徑的範例

{
  "rewrites": [
    {
      "source": "/:path*",
      "destination": "/index.html"
    }
  ]
}

適用情境：

Web App、Dashboard、後台管理系統（例如 Gmail、Notion、Figma Web）

什麼是SSR?

SSR（Server-Side Rendering，伺服器端渲染）是一種在伺服器端先渲染出完整 HTML再回傳給瀏覽器的技術

• 首次載入：使用者請求 → 伺服器執行框架（例如 Next.js、Nuxt.js）→ 回傳已渲染好的 HTML(這時候HTML是死的，沒辦法做任何互動）
• 後續操作：再由前端 JS 接手（Hydration），讓原本死的HTML變成可互動的頁面

優點：

• SEO 友善（搜尋引擎可以抓到完整 HTML）
• 首屏加載快

缺點：

• 部署比 SPA 複雜（需要 Node.js server 執行渲染）
• 伺服器壓力大，因為每次請求都要渲染 HTML
• 開發與除錯成本較高

適用情境：

新聞網站、部落格、電商商品頁（需要 SEO 的地方）

參考資料

https://medium.com/web-design-zone/搞懂前端技術名詞-ssr與spa-450563784c47

https://www.explainthis.io/zh-hant/swe/spa

https://yixuntseng-bruce.medium.com/五分鐘讀前端-為什麼需要ssr-server-side-rendering-d14ff524b820

https://www.instagram.com/p/Ch19-vmJpmv/