隨著 Web 應用越做越大型，傳統「後端輸出 HTML 頁面」的 MVC 模式，開始難以同時滿足快速開發、多端支援與高互動體驗的需求。​
前後端分離的核心精神，就是讓前端專注在畫面與互動，後端專注在商業邏輯與資料服務，兩者透過 API 介面溝通，達到高內聚、低耦合的架構​

在這樣的模式下，Web、iOS、Android 甚至第三方服務，都可以共用同一組 API，後端變成「通用資料服務層」，前端則可以更自由地使用各種框架打造使用者體驗。​

前端主流技術：React、Vue、Angular 三強鼎立

目前在 SPA（Single Page Application）與前後端分離場景中，最主流的三大前端框架是 React、Vue、Angular。​

  • React
    • 由 Facebook 推出，本質比較像「專注在 View 的函式庫」，強調元件化與單向資料流，搭配 Hook 形成主流開發模式。​
    • 優點是生態系龐大（Next.js、React Query 等），適合做大型專案與複雜互動界面，也是目前市場需求最高的前端技術之一。ithelp.ithome+1​
  • Vue
    • 由尤雨溪主導開發，語法相對直覺、上手快，強調「漸進式框架」，小專案可以直接用 <script> 引入，大型專案則可搭配 Vue CLI / Vite、Vue Router、Pinia 等工具。​
    • 在華語圈與中小企業尤其受歡迎，也是前後端分離專案常見首選之一。​
  • Angular
    • 由 Google 推出，屬於「完整框架」，官方內建 Router、HTTP Client、DI、表單處理等一整套方案，使用 TypeScript 進行強型別開發。luklagroup+1​
    • 適合大型企業級系統或長期維運專案，但學習曲線較陡。​

這三者都可以很好地配合 RESTful API 或 GraphQL，實作典型的前後端分離 SPA 應用。​

後端主流技術：從 RESTful API 到微服務

在前後端分離架構下，後端的主要任務不再是產 HTML，而是提供穩定、安全、可擴充的 API 服務，最常見的風格是 RESTful API，近年也越來越多人使用 GraphQL。​

目前主流的後端技術與框架包含：

  • Node.js 生態（Express、NestJS 等）
    • 使用 JavaScript / TypeScript 寫後端，對前端工程師門檻低，搭配 Express 或更結構化的 NestJS，可以快速開發 API 伺服器。​
    • 適合高併發即時服務（聊天、遊戲後端、即時通知），也是許多全端工程師的首選技術棧。​
  • Java：Spring Boot
    • Spring Boot 幾乎是企業級後端開發的標準之一，提供自動配置、內建伺服器、與豐富生態系，適合大型系統與微服務架構。​
    • 在金融、電信、政府等領域的後端系統非常常見。​
  • Python：Django / Flask / FastAPI
    • Django 提供完整 MTV 架構與後台管理，適合快速打造功能齊全的 Web 服務；Flask、FastAPI 則較輕量，適合純 API 或微服務。​
    • 在資料科學、AI 相關服務與原型開發中尤其流行。​
  • PHP：Laravel
    • Laravel 是現今最主流的 PHP 框架之一，提供優雅的路由、中介層、ORM（Eloquent），可同時支援傳統 MVC 與純 API 專案模式。hackmd+1​
    • 對於既有 PHP 團隊或舊系統轉前後端分離，是成本較低的選擇。​
  • .NET：ASP.NET Core
    • 微軟的跨平台後端框架，支援 C#，效能佳且工具鏈完整，適合 Windows 生態或企業級內外部系統。​

這些框架幾乎都提供良好的 REST API 支援，也多數可以與 GraphQL 伺服器（如 Apollo、Hot Chocolate 等）搭配，滿足更複雜的資料抓取需求。​

API 設計與通訊技術：REST、GraphQL 與認證

在前後端分離架構中，「API 設計」是整個系統合作的關鍵介面，常見技術要素包括：​

  • RESTful API
    • 透過 HTTP 動詞（GET、POST、PUT、DELETE）搭配資源路由進行操作，例如 /api/users、/api/orders/{id}。​
    • 簡單直覺、學習成本低，因此成為目前最主流的 API 風格。
  • GraphQL
    • 由客戶端自己定義需要的欄位與資料結構，只打一個 endpoint 就能取得多種關聯資料，減少 over-fetching / under-fetching 問題。​
    • 特別適合複雜前端畫面或多端客戶端共用同一後端時的資料需求管理。​
  • 認證與授權（Authentication & Authorization）
    • 常見方案有 JWT（JSON Web Token）、OAuth 2.0、Session + Cookie 等，用來保護 API 資源與管理使用者身份。​
    • 在前後端分離中，多採 Token-based（如 JWT）搭配 HTTP Header 傳遞，方便多端客戶端整合。​

現代前後端分離的延伸：SSR、CSR、混合框架

雖然前後端分離多數情況下指的是「CSR 的 SPA + API」，但近年來為了兼顧 SEO 與首屏速度，又出現一批「同時支援 CSR + SSR / SSG」的混合式框架。​

  • Next.js（React 生態）、Nuxt.js（Vue 生態） 等框架，讓開發者可以同時使用：
    • CSR：在瀏覽器端渲染、互動順暢
    • SSR：伺服器端預渲染 HTML，改善 SEO 與首屏載入時間
    • SSG：在建置階段就產生靜態頁面，適合內容型網站或部落格。​

這類框架依然以「前端框架 + API 後端」為基底，只是把「誰來產生 HTML」、「在何處渲染」做更多彈性調整，本質上仍延續前後端分離的設計思維。​