這一篇是來筆記一下，我最近看到有關MVC和SPA的概念。
那大部分的內容都是看Huli的這篇文章所得來，並用我自己的話來整理這篇文章的內容。
說是整理也不對，因為，Huli這篇真的太神，已經超清楚了，但是，我還是希望用我自己的話來整理一下。
MVC
仿照huli在文章中常問的三個問題
MVC 這三個區塊分別在幹嘛?
這邊我只想用簡單的話來說明MVC在幹嘛。 因為，書上跟網路上的有些文章在介紹MVC的意思時，都講得有點太咬文嚼字了(可能是我程度不夠吧，嘻嘻)。
M(Model): 跟資料操作有關。即任何跟資料更改有相關的部分都歸它管。
V(View): 跟顯示畫面有關的內容都在這邊。
C(Controller): 將M和V連接起來的橋樑，我看網路上的文章說這部分好像都是用PHP語言來撰寫，也就是後端語言。
那MVC的出現就是要將分工分清楚，取用資料庫就在Model處理，寫HTML就在View處理，最後，在透過Controller從Model取來的資料塞入View中，在將View渲染完的HTML透過
Controller回傳給Server，Server再傳到瀏覽器中，就會看到渲染完的畫面囉。
MVC三個問題
在Huli的文章中常常會問以下三個問題
Q1. 為什麼要有MVC?
Ans: 將程式利用M, V, C三個區塊，將程式碼的職責切分乾淨，讓往後回來再看程式碼比較好管理，也比較看得懂。
Q2. 有MVC和沒有MVC有什麼差別?
Ans: 如果有，你的程式會區分成mvc的架構。如果沒有，那你的程式會所有東西都寫在一起沒有區分開來。
Q3. 什麼是MVC?
Ans: 它是一種程式架構。
SPA
其實，很多文章都有介紹MVC到SPA的演進歷史，但是，我個人其實都沒有太大的印象，不太能感同身受，像是網頁換頁的時候會整頁空白，我完全沒印象。 或者我是一個比較友善的使用者吧XDD
SPA三個問題
Q1. 為什麼要有SPA?
Ans: 改善使用者體驗
Q2. 有SPA和沒有SPA有什麼差別?
Ans: 有沒有換頁時的空白畫面。
Q3. 什麼是SPA?
Ans: 它是一種利用Ajax來達到不換頁的技術。
SPA來龍去脈
Step1.
首先，我們希望在刷新畫面內容的時候，能夠不換頁，就像是送出聊天室的留言的時候，能夠不換頁就看到我們留言的內容。
Solution:
我們透過Ajax的技術，來達成此效果。 也就是透過JavaScript一些非同步的功能，去跟Server取得資料，並在取得資料之後，透過JavaScript來渲染畫面。
如此，就可以達成不需要換頁，也可以看到更新後的內容。
Step2.
第二，希望在跳轉到網站其他頁面的時候，都不會出現因為換頁，而產生瀏覽器完全空白的現象。
Solution:
就將跟後端的請求都改成Ajax的方式，取得資料後，再由JavaScript來渲染畫面，就可以達成這種效果囉。
SPA誕生
經過以上這些步驟的修改後，會發現畫面根本就是在前端渲染完成的，那後端的View的功能根本就沒用了。
然後，在前端部分，我們根本就是在同一個檔案中，透過JavaScript來變換該檔案中不同的內容，而這樣的型式就是SPA。
原本，Server需要根據不一樣的網路路徑來呼叫後端相對應的Controller，進而渲染出不一樣的View的內容。 接著，再回傳到畫面中呈現。
現在，有了SPA的概念之後，就要換前端來判斷現在是在哪一個網路路徑底下，進而渲染不一樣的畫面內容。
SPA 缺點
在SPA底下，原本的HTML內容是空空的，許多內容都是要透過JS來動態生成的，這樣會造成網頁的SEO很差。
所以，才會引進SSR的概念，而SSR就是Server Side Render，由後端來渲染第一次的畫面，
之後，就都由前端來渲染畫面。
這樣的話，不僅彌補了SPA原本的缺點，也讓使用者擁有SPA的暢快體驗~~
參考文章