軟體工程師職涯升級計畫啟動！立即預約職涯諮詢、履歷健檢或模擬面試👈，為您的加薪做好準備！
Web API 是前端與後端溝通的橋樑，因此要理解 API 的演進歷程，必須從「前後端協作模式」的轉變談起。
本文上半部分將從傳統的 MVC 架構談起，介紹模板引擎如何將資料渲染進 HTML、Web API 如何讓前後端分離成為可能，並引出 RESTful API 與 GraphQL 如何改變我們對資源的管理方式。下半部分則會談及常見的 API 認證方式，以及近年興起的 Proxy 技術如何強化 API 安全與效能。
一、前後不分離：MVC 架構與模板引擎
📎 什麼是 MVC？
MVC 是一種經典的軟體架構模式，由三個核心組件構成：- Model（模型）：負責與資料庫互動，處理商業邏輯與資料運算。
- View（視圖）：負責畫面呈現，將資料渲染成 HTML，供使用者閱讀。
- Controller（控制器）：負責接收請求，調用 Model 拿資料，並將資料傳給 View。
MVC 模式強調職責分離，使程式碼更易於維護與測試。以下為典型流程：
sql
複製編輯User Request → Controller → Model → Controller → View → HTML Response
在 MVC 中，View 是與使用者最直接互動的部分，而模板引擎正是產出動態 View 的關鍵。
📎 模板引擎：在伺服器上產出 HTML
模板引擎可將資料與 HTML 模板結合，輸出最終要呈現在瀏覽器的 HTML 文件。
📍範例：EJS 模板引擎（Node.js）
EJS 使用與 JavaScript 相近的語法來操作資料與邏輯：
ejs
複製編輯<% if (isShow) { %>
<p>Show me what you get</p>
<% } %>
<h1><%= title %></h1>
<% %>：嵌入邏輯控制（如條件判斷、迴圈）<%= %>：插入資料（會輸出值）
EJS 搭配 Node.js 的 Express 框架範例如下：
js
複製編輯// Express Controller
app.get('/', (req, res) => {
res.render('index', { title: '首頁', isShow: true });
});
ejs
複製編輯<!-- index.ejs -->
<h1><%= title %></h1>
<% if (isShow) { %>
<p>歡迎來到首頁！</p>
<% } %>
這種方式由後端控制資料流與 HTML 結構，前端主要處理樣式與少量互動功能。
❗前後不分離的限制
儘管 MVC 架構清晰、模板引擎強大，但其「前後不分離」特性，導致以下問題：
- 前端需倚賴後端產出畫面：每次更新畫面，都要等待後端傳回整頁 HTML，難以支援即時互動。
- 角色分工模糊：
- 前端需理解 Controller 的邏輯與後端語言。
- 後端工程師需處理樣式與前端互動，不利專業分工。
- 部署與開發耦合高：前端需在後端環境中執行與測試，降低開發效率與 CI/CD 的彈性。
- 全端工程師壓力大：隨著技術棧複雜化，要精通前後端難度提高，也不利於組織規模化。
✅ 前後端分離的誕生
隨著 SPA（Single Page Application）框架如 React、Vue、Angular 興起，Web 頁面開始在瀏覽器中動態渲染，僅需向後端請求純資料（如 JSON 格式），前後端逐漸走向 分離開發、獨立部署 的模式。
這一轉變促使 Web API（尤其是 RESTful API 與 GraphQL）成為主流。
