請說明何謂SPA (Single Page Application)。
SPA (Single Page Application) 說明
定義
SPA(單頁應用程式)是一種網頁應用程式的架構模式。它只載入單一 HTML 頁面,之後透過 JavaScript 動態更新頁面內容,而非每次操作都向伺服器請求全新的頁面。
運作原理
- 初次載入:瀏覽器載入一個 HTML 頁面與必要的 JavaScript、CSS 資源。
- 後續互動:使用者操作時,透過 JavaScript(通常使用 AJAX / Fetch API)向伺服器取得資料(多為 JSON 格式),再由前端動態重繪畫面。
- 不重新整理:畫面切換不會導致整頁重新載入,體驗接近原生桌面或行動應用程式。
主要特點
- 流暢的使用者體驗:頁面切換無白屏、無閃爍。
- 前後端分離:伺服器主要提供 API,前端負責畫面渲染。
- 降低伺服器負擔:多數渲染工作移至用戶端。
常見技術/框架
優缺點
優點
缺點
- 首次載入較慢(需下載較大的 JS)
- SEO 較弱(內容由 JS 動態產生,需額外處理,如 SSR)
- 需依賴 JavaScript 才能正常運作
對比:MPA(Multi Page Application)
傳統多頁應用每次操作都由伺服器回傳完整 HTML 頁面,SPA 則在用戶端完成大部分渲染。
參考資料
[developer.mozilla.org]https://developer.mozilla.org/en-US/docs/Glossary/SPA