後端框架與API 開發(六) - 前後分離開發演進

※ 原本狀態：伺服器渲染

這是 MVC 架構下的 request / response 示意圖，在這張圖呈現的架構裡，畫面和資料都由同一個架構處理。

伺服器渲染流程：

• 瀏覽器針對特定網址送出請求。
• 路由器解析請求後，轉接給對應的 controller。
• controller 按照要求，透過 model 拿資料。
• controller 拿到資料後，呼叫 view template，並嵌入資料。
• 把「有資料的 template」回傳給瀏覽器，變成使用者看到的畫面。

在這種架構下，幾乎伺服器解決所有事情，瀏覽器只負責處理伺服器已經計算好的靜態網頁。

優點在於，網頁前端的邏輯非常簡單，對瀏覽器的效能需求也非常低。因此，這種開發方式主要應用於行動裝置，或基礎建設沒有這麼完善的國家。

缺點在於，大部分計算都在伺服器，導致伺服器運算效能消耗大；同時，前後端的程式碼容易混在一起，後續維護和修改都不易，容易發生改前端卻誤改後端程式碼的情況。

※ API 出現：AJAX + API 溝通資料

Google 的 Gmail 大量活用了 AJAX (Asynchronous JavaScript and XML) 和 API (Application Programming Interface)。這種技術允許前端透過 AJAX 發送多個請求，並且可以透過 API 只更新部分資料。例如，當從收件夾切換到垃圾郵件時，不需要改變網頁的大部分內容，只需要向伺服器請求部分資料，並取代部分畫面。

AJAX 技術的實現，讓前端、後端分離的概念發生。

※ 分離狀態：前端模組化

模組化以後的前端，請求會變得相對明確及繁瑣，原本向後端直接請求一個網頁，現在會請求多個元件，例如：文章資料、使用者資料分開請求，每個元件送出各自的 API，不會像前一階段直接取得一大組資料。

Express.js 專案變成了「後端」，只專門管資料，這時瀏覽器發出請求，第一個接到請求的是前端，前端再發送請求給後端請求資料。

取得資料之後，前端把資料塞進自己的 template（模板），回傳給用戶端。

※ 小結

前後端分離的優點在於前後端可以各自獨立，工程師更加專才，所以在開發、管理、後續的維護成本都可以下降，前、後端各自更針對性地效能優化。

缺點在於前端邏輯變得複雜，網頁需要載入大量 JavaScript，再用 JavaScript 運算出整個畫面，如果瀏覽器的效能不足，使用者操作網頁可能會出現卡頓。