MPA(Multi-Page Application)

MPA 是相對傳統的網頁開發方式，它的原理就是將整個網站拆分成很多個畫面，一個畫面就是一個 HTML 檔案，每個畫面都是獨立的，下面舉個例子：

1. 使用者需要傳送表單，client 會將請求傳送給 server
2. server 再將接下來需要呈現的頁面傳送給 client
3. client 載入由 server 傳送來的 HTML 檔給使用者

所以才會說每個頁面都是獨立的，但因為每次載入畫面都需要經過以上這些流程，從 server 得到畫面再更新整個畫面，所以畫面重整的速度會變慢。

SPA(Single-Page Application)

但只有一個畫面是怎麼呈現出這麼多不同的元素的呢？

整個網站其實全部只有一個頁面，透過 AJAX 的技術，可以使畫面只更新需要改變的元素，避免畫面需要重整的困擾，之後會介紹到目前的前端三大框架---Vue/React/Angular

除此之外，SPA 還有前後端分離的優點、提供使用者更偏向 Desktop/Mobile App 的使用者體驗等好處，但這類型的網站在第一次載入時會較慢。

比較

這邊將兩種網站開發模式做了一些比較

時代 | 相對現代 | 相對傳統 |
前後端結合緊密程度 | 相對現代 | 相對傳統 |
畫面載入速度 | 較快 | 較慢 |
SEO | 較差 | 較好 |