軟體工程師職涯升級計畫啟動！立即預約職涯諮詢、履歷健檢或模擬面試👈，為您的加薪做好準備！
Web API 的誕生，是前後端分離的關鍵推手。它不僅改變了瀏覽器與伺服器之間的溝通模式，更重新定義了前後端工程師的角色與分工方式。
本篇將帶你理解什麼是 API、如何透過 Web API 取代模板引擎完成畫面資料的渲染、以及前後端分離帶來的效能與開發效率提升。
一、什麼是 API？
API（Application Programming Interface，應用程式介面）是兩個系統之間的「溝通橋樑」。就像電風扇上的開關面板提供「操作介面」，讓我們不需理解內部機械原理就能使用，API 則提供一組定義好的「使用說明」，讓程式開發者能方便地存取外部功能或資料。📍簡單例子：
你要在餐廳網站上嵌入 Google Maps 顯示地點，並不需自己開發一套地圖系統，只要使用 Google Maps API，即可讓你的網頁與 Google Maps 溝通，顯示對應的地標。
js
複製編輯GET https://maps.googleapis.com/maps/api/place/details?place_id=...
透過這個 URL，就能從 Google 的伺服器取得地點資訊，而這個請求與回應的行為，就是一種 Web API 的使用。
二、什麼是 Web API？
Web API 是一種以 HTTP 協定為通訊基礎的 API，資料通常以 JSON 或 XML 格式傳遞。以下是常見協定與用途：
- 協議用途
- HTTP / HTTPS
- 網頁資料交換（最常見）
- RTMP / RTSP
- 視訊串流
- MQTT / COAP
- 物聯網（IoT）設備通訊
隨著應用需求的擴展，Web API 成為現代網頁應用開發中不可或缺的核心組件。
三、前後端分離：從 Web API 到獨立開發
在前後端分離架構中，後端不再產生 HTML，而是透過 API 提供純粹的資料（例如 JSON 格式），前端則使用 JavaScript 動態渲染畫面。
📍範例說明：
假設你開發一個旅遊網站，希望顯示使用者儲存的旅館地點，你可以使用如下 API：
http
複製編輯GET /me/markers
Authorization: Bearer {token}
後端回傳資料（JSON）：
json
複製編輯{
"markers": [
{
"name": "Rixos The Palm Dubai",
"position": [25.1212, 55.1535]
},
{
"name": "Shangri-La Hotel",
"position": [25.2084, 55.2719]
}
]
}
前端接收後即可使用 JavaScript 顯示在地圖上：
js
複製編輯fetch("/me/markers")
.then(res => res.json())
.then(data => {
data.markers.forEach(marker => {
map.addMarker(marker.name, marker.position);
});
});
這樣的架構，完全不需要模板引擎，前端可以自由掌控 UI 呈現與資料流程。
四、前後端分離的優點為何成為主流？
✅ 1. 增強程式碼可維護性
- 前後端職責明確，互不干擾。
- 更容易撰寫單元測試與除錯。
- 架構更具彈性，支援微服務等現代後端模式。
✅ 2. 提高開發效率與團隊協作
- 可同步開發，前端可用假資料（Mock API）先行進行介面開發。
- API 規格（API spec）作為協作契約，減少溝通成本。
✅ 3. 優化使用者體驗
- 實現 SPA（單頁應用），提升頁面切換速度。
- 支援 Lazy Load、Component-Based UI，減少資源浪費。
- 整合瀏覽器快取與前端效能優化策略。
✅ 4. 技術棧清晰，利於專業發展
- 前端可專注 React、Vue、Next.js 等框架。
- 後端專攻 API 設計、安全性、資料管理與 DevOps。
- 更符合現代招聘與職涯路線規劃（如「前端工程師」、「後端工程師」明確分工）。
📎總結：
前後端分離不是只是技術演進，更是工程團隊開發流程與產品思維的革新。它讓資料與呈現邏輯徹底解耦，推動 Web 應用向更靈活、高效與可擴展的方向邁進。
