MPA(Multi-Page Application)
MPA 是相對傳統的網頁開發方式，它的原理就是將整個網站拆分成很多個畫面，一個畫面就是一個 HTML 檔案，每個畫面都是獨立的，下面舉個例子：
- 使用者需要傳送表單，client 會將請求傳送給 server
- server 再將接下來需要呈現的頁面傳送給 client
- client 載入由 server 傳送來的 HTML 檔給使用者
所以才會說每個頁面都是獨立的，但因為每次載入畫面都需要經過以上這些流程，從 server 得到畫面再更新整個畫面，所以畫面重整的速度會變慢。
SPA(Single-Page Application)
但只有一個畫面是怎麼呈現出這麼多不同的元素的呢？
整個網站其實全部只有一個頁面，透過 AJAX 的技術，可以使畫面只更新需要改變的元素，避免畫面需要重整的困擾，之後會介紹到目前的前端三大框架—Vue/React/Angular
除此之外，SPA 還有前後端分離的優點、提供使用者更偏向 Desktop/Mobile App 的使用者體驗等好處，但這類型的網站在第一次載入時會較慢。
比較
這邊將兩種網站開發模式做了一些比較
| SPA | MPA | |
|---|---|---|
| 時代 | 相對現代 | 相對傳統 |
| 前後端結合緊密程度 | 相對現代 | 相對傳統 |
| 畫面載入速度 | 較快 | 較慢 |
| SEO | 較差 | 較好 |