Skip to main content

網頁架構的不同種類與演進

MPA v.s. SPA​

Multi-page application, MPA​

傳統網頁採用 Multi-page application 多頁面架構，前端需要換頁面時，要發 request 請 server 計算完要成現在畫面上的 html 再拿回來呈現，更新畫面，會有一個跳轉換頁動作（整個畫面取代成新的 HTML）。

Single-page application, SPA​

MPA 的缺點在於，如果網速比較慢或網頁資源較大等等情況發生，就容易讓使用者等很久，體驗不太好，因此後來發產出 Single-page application, SPA，在此架構下，會搭配 AJAX 技術，除了第一次需要全畫面渲染，之後網頁 「不需跳轉頁面」 就可以達到基本的建立、讀取、修改、刪除功能，透過 「動態」重寫部分頁面的方式，來提高使用者體驗。

SPA 是現代前端常用的一種設計架構，主要的優點是不像最早期 MPA 的網頁一樣每點一個連結就要換頁一次，他透過前後端分離及前端路由可以達到需要時才抽換部分網頁內容，這樣使用者就不會在網路慢時有機會看到空白的畫面，提升了使用者的體驗。

SPA 通常依賴大量 JS 來完成所需要的功能，所以缺點是，首次進到頁面時有機會比較慢才看到畫面出現，因為他收到的 HTML 基本上是空的（只會有一個跟節點元素），需要等 JS 被下載完，瀏覽器解析並畫出畫面使用者才會看到畫面、進一步可以跟他互動。承接剛剛說的，因為剛開始收到的 HTML 是空的，有機會搜尋引擎的爬蟲在爬我們網頁時會看到空內容，目前的搜尋引擎也有會去解析 JS ，但爬蟲分配給一個網站的時數也有限，所以 SEO 總是較不理想。

優點：

  • 局部更新，使用者體驗較好
  • 結合 UI 的工作改由瀏覽器完成，對 Server 來說負擔變小，這樣可以處理更多的請求
  • 前後端分離，各司其職，提供開發及維護上的獨立性及提高了效率

缺點：

  • SEO 會較差一點
  • 第一次進入頁面需要較長的時間才能看到頁面、與他互動
  • 因 URL 網址都沒有改變，前端要自己管理必須自定狀態來做判斷