點燈坊

失くすものさえない今が強くなるチャンスよ

SPA vs. MPA

Sam Xiao's Avatar 2024-02-27

Vue Router 基於 SPA，相較於傳統 MPA 有些本質上的差異。

Version

Vue 3.4
Vue Router 4.2

MPA

mpa

  • MPA (Multi Page Application)
  • 公司官網、活動網站、購物網站
  • 不同 url 回傳 不同 html，可能有是實體 html 檔，也有可能是 SSR (Server Side Render)
  • 後端技術：PHP、RoR、JSP、.NET MVC、Node.js + EJS ….
  • Router：由後端提供

SPA

spa

  • SPA (Single Page Application)
  • Gmail
  • 不同 url 都回傳 index.html，由 CSR (Client Side Render) 實現路由
  • 前端技術：Angular、React、Vue、Svelte …
  • Router：由前端提供

優缺點比較

  • User Experience
    • MPA：切換 url 時，後端必須將 HTML 全部 render 好才會回傳 HTML，使用者體驗較差
    • SPA：切換 url 時，前端直接 render HTML，使用者體驗較佳
  • SEO (Search Engine Optimization)
    • MPA：每頁有獨立的 HTML，可在 <head> 內提供 <meta>，有助於 Google、Facebook、Twitter … 的 SEO
    • SPA：只有一個 index.html，<head> 內的 <meta> 是固定的，SEO 困難

Conclusion

  • 也還是有其他方法可解決 SEO，如 Nuxt (基於 Vue 的 SSR 後端 framework)、VitePress (基於 Vue 的 SSG (Static Site Generator))

# Vue # Vue Router