# SPA 與 MPA 的差異比較
###### tags: `ReactJS` `Javascript`


## 什麼是 MPA (Multi-Page Application)
MPA 指的是一般傳統的開發方式，有幾個頁面就製作幾個 HTML 檔案，後端程式語言通常會使用 PHP, ASP, Java, Ruby 或 Python ... 等。當頁面越多越複雜時 Client 端跟 Server 端就要傳遞越多次資料。


## 什麼是 SPA (Single-Page Application)
SPA 顧名思義整個網站只有一個頁面，透過 AJAX 技術處理讓頁面在送出資料且收到 Server 的回覆後，只針對需要更新的元件來更新。


| 項目 | MPA | SPA |
| -------- | -------- | -------- |
| 頁面組成 | 多個頁面構成 | 單一頁面和多個頁面片段構成 |
| 頁面切換方式 | 整頁刷新 | JS 局部刷新 |
| 頁面切換時間 | 慢 | 快 |
| 第一次進站時間 | 快 | 慢 |
| 共用資源重新載入 | 是 | 否 |
| 用戶體驗* | 差 | 佳 |
| 轉場動畫 | 無法實現 | 容易實現 |
| 頁面間的資料傳遞 | 依賴 URL, Cookie, localStorage，較麻煩 | 因為在同一個頁面中，較容易實現 |
| SEO | 可以直接做 | 需搭配其他解決方案，較麻煩 |
| 適用專案 | 較依賴 SEO 的網站 | 對行動裝置體驗要求較高的網站 |

### 參考來源
:::info
* [[Angular 深入淺出三十天] Day 01 - MPA 與 SPA](https://ithelp.ithome.com.tw/articles/10202427)
* [SPA與MPA的區別](https://www.itread01.com/content/1546096324.html)
:::