Open TsaiChihWei opened 4 years ago
此篇內容參考自 前後端分離與 SPA 和 跟著小明一起搞懂技術名詞：MVC、SPA 與 SSR 請簡單解釋什麼是 Single Page Application 又稱為「單頁面應用程式」，SPA 是透過 Ajax 串接 API 來取得資料，並在 client 端動態新增資料，由 Server-side render 轉為 Client-side render，這些交換資料的過程都是在單一頁面完成而不用換頁，對使用者來說有比較好的使用體驗。
此篇內容參考自 前後端分離與 SPA 和 跟著小明一起搞懂技術名詞：MVC、SPA 與 SSR
又稱為「單頁面應用程式」，SPA 是透過 Ajax 串接 API 來取得資料，並在 client 端動態新增資料，由 Server-side render 轉為 Client-side render，這些交換資料的過程都是在單一頁面完成而不用換頁，對使用者來說有比較好的使用體驗。
對比 SPA，早期的網頁多為 Multi-page Application 又稱 MPA「多頁面應用程式」，每次交換資料都需重新刷新頁面中斷使用者體驗。
優點：
更好的使用者體驗：透過 Ajax 串接 API 來取得資料，並在 client 端動態新增資料，由 Server-side render 轉為 Client-side render，這些交換資料的過程都是在單一頁面完成而不用換頁
前後端職責分離：後端只負責輸出資料，前端只負責抓資料跟渲染畫面以便維護，假使其中一方壞掉也不會影響另一者
缺點：
不同在於前者是 client-side render 不須換換頁;使用 PHP 只接輸出內容是 server-side render 每次交換資料都須刷新頁面。
本週透過 SPA 前後端分離的方式，後端依據需要的功能寫好各自負責與資料庫溝通的 API，再由前端以 Ajax 向 API 互動後將結果動態直接呈現在 client-side，頁面中其他非當前動作的元素不會重新載入，檢視原始碼無法看到實際的留言內容。
因為小明寫的 code 太髒了太難維護，所以需要重構。而後來他發現用 Model、View、Controller 這三個概念來切的話可以把 code 寫得漂亮很多又好維護，就這樣做了。差別在於原本的 code 混在一起，遵守 MVC 的規範之後職責變得清楚很多。所以呢，MVC 就是一種架構，後端可以遵守 MVC 的架構去開發，前端也可以，就算不是 Web 也可以用 MVC。
MVC 就是因為 code 變得越來越亂，所以將職責區分清楚的一種設計模式。SPA 就是因為想增進使用者體驗，而出現的一種在前端利用 Ajax 達成不換頁的方法。SSR 就是因為要解決 SPA 的 SEO 問題而出現的解法。
對比 SPA，早期的網頁多為 Multi-page Application 又稱 MPA「多頁面應用程式」，每次交換資料都需重新刷新頁面中斷使用者體驗。
SPA 的優缺點為何
優點：
更好的使用者體驗：透過 Ajax 串接 API 來取得資料，並在 client 端動態新增資料，由 Server-side render 轉為 Client-side render，這些交換資料的過程都是在單一頁面完成而不用換頁
前後端職責分離：後端只負責輸出資料，前端只負責抓資料跟渲染畫面以便維護，假使其中一方壞掉也不會影響另一者
缺點：
這週這種後端負責提供只輸出資料的 API，前端一律都用 Ajax 串接的寫法，跟之前透過 PHP 直接輸出內容的留言板有什麼不同？
不同在於前者是 client-side render 不須換換頁;使用 PHP 只接輸出內容是 server-side render 每次交換資料都須刷新頁面。
本週透過 SPA 前後端分離的方式，後端依據需要的功能寫好各自負責與資料庫溝通的 API，再由前端以 Ajax 向 API 互動後將結果動態直接呈現在 client-side，頁面中其他非當前動作的元素不會重新載入，檢視原始碼無法看到實際的留言內容。
MVC 是什麼？
MVC 就是因為 code 變得越來越亂，所以將職責區分清楚的一種設計模式。SPA 就是因為想增進使用者體驗，而出現的一種在前端利用 Ajax 達成不換頁的方法。SSR 就是因為要解決 SPA 的 SEO 問題而出現的解法。