Try   HackMD

SPA 與 MPA 的差異比較

tags: ReactJS Javascript

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

什麼是 MPA (Multi-Page Application)

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

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

什麼是 SPA (Single-Page Application)

SPA 顧名思義整個網站只有一個頁面,透過 AJAX 技術處理讓頁面在送出資料且收到 Server 的回覆後,只針對需要更新的元件來更新。

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

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

參考來源