# SPA & MVC
> 此篇內容參考自 [前後端分離與 SPA](https://blog.techbridge.cc/2017/09/16/frontend-backend-mvc/) 和 [跟著小明一起搞懂技術名詞：MVC、SPA 與 SSR](https://hulitw.medium.com/introduction-mvc-spa-and-ssr-545c941669e9)
## 請簡單解釋什麼是 Single Page Application
又稱為「單頁面應用程式」，SPA 是透過 Ajax 串接 API 來取得資料，並在 client 端動態新增資料，由 Server-side render 轉為 Client-side render，這些交換資料的過程都是在單一頁面完成而不用換頁，對使用者來說有比較好的使用體驗。

對比 SPA，早期的網頁多為 Multi-page Application 又稱 MPA「多頁面應用程式」，每次交換資料都需重新刷新頁面中斷使用者體驗。

## SPA 的優缺點為何
優點：
+ 更好的使用者體驗：透過 Ajax 串接 API 來取得資料，並在 client 端動態新增資料，由 Server-side render 轉為 Client-side render，這些交換資料的過程都是在單一頁面完成而不用換頁

+ 前後端職責分離：後端只負責輸出資料，前端只負責抓資料跟渲染畫面以便維護，假使其中一方壞掉也不會影響另一者

缺點：
+ SEO 不佳：由於內容是由 JavaScript 動態產生，檢視原始碼會看不到動態新增後的內容。可以在第一個頁面使用 server-side render 解決 SEO 問題
+ 由於 SPA 只有一個畫面處理所有功能，前端須自己管理 URL 的狀態，去決定現在要顯示哪一個頁面

## 這週這種後端負責提供只輸出資料的 API，前端一律都用 Ajax 串接的寫法，跟之前透過 PHP 直接輸出內容的留言板有什麼不同？

不同在於前者是 client-side render 不須換換頁;使用 PHP 只接輸出內容是 server-side render 每次交換資料都須刷新頁面。

本週透過 SPA 前後端分離的方式，後端依據需要的功能寫好各自負責與資料庫溝通的 API，再由前端以 Ajax 向 API 互動後將結果動態直接呈現在 client-side，頁面中其他非當前動作的元素不會重新載入，檢視原始碼無法看到實際的留言內容。

## MVC 是什麼？
> 因為小明寫的 code 太髒了太難維護，所以需要重構。而後來他發現用 Model、View、Controller 這三個概念來切的話可以把 code 寫得漂亮很多又好維護，就這樣做了。差別在於原本的 code 混在一起，遵守 MVC 的規範之後職責變得清楚很多。所以呢，MVC 就是一種架構，後端可以遵守 MVC 的架構去開發，前端也可以，就算不是 Web 也可以用 MVC。

MVC 就是因為 code 變得越來越亂，所以將職責區分清楚的一種設計模式。SPA 就是因為想增進使用者體驗，而出現的一種在前端利用 Ajax 達成不換頁的方法。SSR 就是因為要解決 SPA 的 SEO 問題而出現的解法。