🚀 前言

如果你曾經想過：

  • 為什麼 Twitter、Instagram、Google Maps 操作起來這麼順？
  • 為什麼有些網站點一下就整頁變白、重新載入？
  • SPA 到底是什麼？和傳統網站有什麼差別？

那這篇文章會讓你一次搞懂。

✅ SPA 是什麼？

SPA（Single Page Application）簡單定義

SPA =「不重新載入整頁，只更新需要的部分」的 Web 應用。

傳統網站（MPA：Multi Page Application）每次點擊連結都會：

  • 重新向伺服器請求整個 HTML
  • 頁面短暫變白
  • 等待載入完成後才顯示內容

而 SPA 的流程完全不同：

  • 第一次載入時取得 一個 HTML + JavaScript
  • 之後的畫面切換由 JavaScript 動態更新內容
  • 不需要整頁重新載入 → 操作順滑不卡

這就是你感受到「像 App 一樣」的原因。

🎯 為什麼需要 SPA？

SPA 的核心目標只有一個：

讓 Web 應用的體驗更快、更流暢。

具體來說：

  • 不重新載入整頁
  • 只向伺服器請求必要資料（JSON）
  • 畫面切換由前端框架負責
  • 使用者感覺不到「跳頁」

因此 SPA 特別適合互動密集的應用，例如：

  • SNS
  • 聊天
  • 地圖
  • 後台管理系統
  • 即時搜尋介面

❌ 如果不用 SPA 會怎樣？

傳統 MPA 的問題：

  • 每次跳頁都會 整頁刷新
  • 畫面會短暫變白
  • 需要等待伺服器回應
  • 操作感覺「卡卡的」

SPA 正是為了解決這些痛點而誕生。

🧭 SPA 適用與不適用的場景

適合 SPA 的情況

  • SNS（Twitter、Instagram）
  • 聊天應用（Slack、Discord）
  • 地圖（Google Maps）
  • 後台管理系統、Dashboard
  • 商品搜尋頁、濾鏡切換

不適合 SPA 的情況

  • 內容為主的網站（部落格、企業官網）
  • SEO 極度重要的頁面（除非搭配 SSR/SSG）

💡 小知識：為什麼 SPA「像 App 一樣」？

因為：

畫面切換不是由瀏覽器完成，而是由 JavaScript 控制。

也就是說：

  • 不跳頁
  • 不重新載入
  • 只替換畫面中的部分區塊

這種方式和原生 App 的 UI 更新方式非常接近。

🗺️ Google Maps：SPA 的經典案例

想像一下：

每次拖動地圖都重新載入整頁？

根本沒辦法用。

Google Maps 透過 SPA 的方式：

  • 只載入需要的地圖區塊
  • 動態更新畫面
  • 實現流暢的縮放、拖曳體驗

🛠️ 支撐 SPA 的技術

  • React（Meta 開發，生態最完整）
  • Vue.js（輕量、易上手）
  • Angular（Google 開發的大型框架）

這些框架負責：

  • 管理畫面狀態
  • 處理資料更新
  • 控制 UI 渲染

讓 SPA 的開發變得更高效。

📚 延伸閱讀

官方文件

Wikipedia

🛠️ 想更深入？可以從這些主題開始

  • CSR / SSR / SSG 的差異
  • API 與資料取得方式
  • React / Vue 入門
  • Hugo + Cloudflare Pages（SSG）

理解不同渲染方式後，你會更清楚 SPA 在 Web 生態中的定位。

🎯 總結

  • SPA = 單頁應用，只更新內容不重新載入整頁
  • 因此操作起來 順滑、快速、接近原生 App
  • 適合互動密集的應用（SNS、聊天、地圖）
  • 由 React / Vue / Angular 等框架支撐
  • 但也有 SEO、初次載入速度等挑戰