---
# System prepended metadata

title: SPA
tags: [web 基礎]

---

# SPA
###### tags: `web 基礎`
## Single Page Application
single-page application 縮寫為 SPA，中文為「單一頁面應用程式」。其主要的概念是透過**單一頁面**達成的建立、讀取、修改與刪除資料等功能。

相對於早期的網站設計主要採多頁設計，通常一個功能一個頁面，在資料傳送間必須重新載入頁面。

而 SPA 的資料傳輸主要以 ajax 的方式進行，透過 ajax 資料可以在背景傳輸，讓資料存取功能在不切換頁面的情況下可以實現。

由於早期的網站設計主要採多頁設計，不同功能或傳送資料時必須重新載入頁面，每次重新載入代表整個 html 畫面的重新繪製，需要較多的網路資源。

## SPA 的優缺點為何
### 優點
相較於採用多頁設計的網站，SPA 在存取資料時不需要重新載入頁，若網站中只有一部分資料更動，只需對該部份進行更新，達到較佳使用者體驗。

### 缺點
由於 SPA 的網站資料可能是由 JavaScript 等方式動態生成，因此搜尋引擎無法直接取得網站資料內容，對於 SEO 會有影響。