Web 2.0 開發中的 AJAX 架構模式：HTML 增強 vs Client/SOA

兩大架構光譜

AJAX 推動 Web 應用從「頁面集合」向「單頁應用」演進，形成兩極架構模式：

模式一：HTML 增強

• 核心：伺服器端渲染為主，AJAX 做局部增強 (驗證、聯動、分頁局部刷新)。
• 特徵：
  • 整頁重載仍頻繁發生 (導航、表單提交)。
  • 可優雅降級：關閉 JS 仍可基本操作。
  • 會話狀態完全在伺服器 (Session)。
  • 後端模板引擎 (JSP, Thymeleaf, Razor) 產出 HTML 片段。
• 代表工具：jQuery + 後端 MVC、Rails UJS、Turbo Drive (Hotwire)、htmx。
• 優勢：開發門檻低、SEO 友好、安全性高 (邏輯在後端)、團隊分工清晰。
• 局限：互動體驗有上限、前後端耦合度高、複雜狀態管理困難。

模式二：Client/SOA (單頁應用 + 服務導向後端)

• 核心：瀏覽器端執行完整應用邏輯 (路由、狀態、渲染)，後端純 API 提供資料與業務服務。
• 特徵：
  • 整頁重載極少 (僅初始載入)。
  • 無法優雅降級：JS 為必須。
  • 會話狀態前置化 (Redux, Vuex, Signals, LocalStorage)。
  • 瀏覽器即運行時，JS 為組裝膠水。
• 代表技術棧：React/Vue/Angular/Svelte + Redux/Pinia + React Router + REST/GraphQL + Spring Boot/Node.js/Go。
• 優勢：極致互動體驗、前後端解耦並行開發、離線/PWA 支援、微前端擴展性。
• 局限：複雜度高 (建構、測試、SEO、效能優化)、需專業前端工程師、首屏載入大。

關鍵差異對照

演進路徑與混合策略

1. 起步：HTML 增強 (低成本、快速交付)。
2. 痛點觸發：複雜表單、即時協作、豐富圖表、離線需求。
3. 漸進遷移：Strangler Fig 模式 — 按頁面/功能逐步重寫為 SPA 組件，共存期由路由層分流。
4. 混合最佳實踐**：
   • 內容型頁面 (文章、商品詳情) → SSR/SSG (Next.js, Nuxt, Astro) 兼顧 SEO 與效能。
   • 高互動頁面 (儀表板、編輯器、IM) → 純 CSR SPA。
   • 後端統一輸出 OpenAPI/Swagger，前端自動生成 TypeScript Client。

購物車案例：兩種模式的具體對比

// HTML 增強 (jQuery + 後端渲染片段)
$('#add-to-cart').click(() => {
    $.post('/cart/add', {itemId: 123}, html => {
        $('#cart-sidebar').html(html); // 後端回傳完整側邊欄 HTML
    });
});

// Client/SOA (React + Redux + API)
dispatch(addToCart(123)); // 1. 樂觀更新本地 Store
api.post('/cart', {itemId: 123}) // 2. 非同步同步後端
    .catch(() => dispatch(removeFromCart(123))); // 3. 失敗回滾
// UI 訂閱 Store 變化自動重渲染

差異本質：前者「詢問後端長什麼樣」，後者「告訴後端發生什麼事，自己決定長什麼樣」。

技術選型決策樹

需要 SEO / 內容導向 / 團隊缺前端專才  ──► HTML 增強 / SSR (Next.js, Nuxt)
                    │
                    ▼
高互動 / 即時 / 離線 / 微前端 / 前端專才充足 ──► Client/SOA (React/Vue/Svelte + API)
                    │
                    ▼
兩者兼顧 / 漸進遷移 ──► 混合架構 (SSR 入口 + CSR 應用島)

總結

「HTML 增強」與「Client/SOA」非對立，而是架構光譜兩端。現代 Web 發展趨勢是混合與融合：以業務價值為導向，內容頁 SSR、應用頁 CSR、API 統一、體驗優先。技術選型應服務於團隊能力、產品階段、用戶場景，而非教條主義。