HTMX 2.0 完全指南：為什麼越來越多人放棄 React

過去幾年，React 生態系持續膨脹：Redux、React Query、React Router、React Compiler……一個「簡單」的互動功能，需要三層抽象才能完成。與此同時，越來越多的開發者開始質疑：這些複雜性真的必要嗎？HTMX 2.0 就是這個質疑的具體答案：用 HTML 屬性實現完整互動，JavaScript 只在必要的時候出現。

HTMX 是什麼？

HTMX 是一個 JavaScript 庫，它的核心思想是：HTTP 是瀏覽器與伺服器之間最好的交換格式，而 HTML 本身已經是一種描述 UI 的語言。

HTMX 讓你可以在 HTML 元素上，通過 hx-* 屬性，宣告「這個元素在被某個事件觸發時，要向哪個 URL 發送請求，並用伺服器返回的 HTML 替換哪個目標元素」。

<!-- 點擊按鈕，向 /api/greet 發送 POST 請求，用返回的 HTML 替換 #result 元素 -->
<button
  hx-post="/api/greet"
  hx-target="#result"
  hx-swap="innerHTML"
>
  打招呼
</button>

<div id="result"></div>

# 對應的 Flask 路由（任何語言的後端都可以）
@app.route('/api/greet', methods=['POST'])
def greet():
    name = request.form.get('name', 'World')
    return f'<span class="greeting">Hello, {name}!</span>'

不需要 useState、不需要 useEffect、不需要 API client。只需要一個 HTML 屬性和一個後端路由。

HTMX 2.0 的重要新功能

1. 擴展（Extensions）移出核心倉庫

HTMX 2.0 把所有官方擴展從核心倉庫移到了獨立的 extensions repository，並有獨立的版本號。

<!-- 2.0 的 SSE 引用方式 -->
<script src="https://extensions.htmx.org/dist/ext/sse.js"></script>

<!-- 現在每個擴展都可以獨立更新，不需要等 HTMX 主體 release -->
<div hx-sse="connect:/api/notifications">
  <!-- 這裡會即時顯示來自 Server-Sent Events 的通知 -->
</div>

這個改變讓 HTMX 的擴展生態可以更快迭代，也讓核心庫保持極小（壓縮後約 14KB）。

2. Web Components 支援大幅改善

HTMX 2.0 對 Custom Elements 的支援做了大幅改善。可以在 Web Component 的 Shadow DOM 內使用 HTMX：

// 自定義 Web Component 內使用 HTMX
class DynamicPanel extends HTMLElement {
  connectedCallback() {
    this.innerHTML = `
      <button
        hx-get="/api/panel-content"
        hx-target="this"
        hx-swap="innerHTML"
      >
        載入內容
      </button>
      <div id="panel"></div>
    `;
    // HTMX 會正確初始化這個 Shadow DOM 內的 HTMX 元素
    htmx.process(this);
  }
}

customElements.define('dynamic-panel', DynamicPanel);

<!-- 使用時就像普通 HTML 一樣 -->
<dynamic-panel></dynamic-panel>

3. 新的 `hx-on:` 語法取代 `hx-on`（特殊語法）

HTMX 1.x 的 hx-on 屬性使用非標準語法：

<!-- HTMX 1.x：特殊語法，容易寫錯 -->
<button hx-post="/api/submit" hx-on="click::myHandler">
  提交
</button>

HTMX 2.0 廢棄了 hx-on，改用標準的 hx-on: 語法：

<!-- HTMX 2.0：更一致的語法 -->
<button
  hx-post="/api/submit"
  hx-on:click="if(!confirm('確定提交?')) return false"
>
  提交
</button>

<!-- 事件監聽也更直覺 -->
<div hx-get="/api/status" hx-on:htmx:after-request="this.innerHTML = ''">
  狀態區域
</div>

4. `hx-validate`：表單提交前的驗證

HTMX 2.0 新增了 hx-validate 屬性，可以在發送請求前對表單元素進行驗證：

<form
  hx-post="/api/signup"
  hx-target="#form-result"
  hx-validate
>
  <input type="email" name="email" required minlength="5" />
  <input type="password" name="password" required minlength="8" />
  <div id="form-result"></div>
  <button type="submit">註冊</button>
</form>

加了 hx-validate 後，HTMX 會在發送請求前，檢查所有 HTML5 原生驗證屬性（required、minlength、pattern 等），不符合條件時阻止請求。

5. HTTP 行為修正（符合規範）

HTMX 2.0 對 HTTP 行為做了兩個重要修正：

DELETE 請求：現在使用 URL query parameters 而非 request body（符合 RFC 規範）

<!-- HTMX 2.0 中，DELETE 請求格式改變 -->
<a hx-delete="/api/items/1" hx-confirm="確定刪除？">刪除</a>
<!-- 發送：DELETE /api/items/1?_id=1（query param）-->
<!-- HTMX 1.x 發送：DELETE /api/items/1（request body）-->

selfRequestsOnly 預設為 true：htmx.config.selfRequestsOnly 現在預設為 true，防止 XSRF 攻擊。

HTMX vs React：什麼時候 HTMX 更好？

HTMX 的適用場景

1. 以內容為主的網站

<!-- 點擊切換 Tab，伺服器返回 HTML -->
<div hx-tabs>
  <div hx-get="/tabs/overview" hx-target="#tab-content">總覽</div>
  <div hx-get="/tabs/settings" hx-target="#tab-content">設定</div>
  <div id="tab-content">
    <!-- 動態內容替換在這裡 -->
  </div>
</div>

2. 後端主導的應用 如果你的團隊中後端工程師是大多數，用 HTMX 可以讓整個應用保持一個一致的開發範式：後端返回 HTML，前端不做狀態管理。

3. 快速原型

<!-- 最快的 CRUD 實現 -->
<table>
  {{ range items }}
  <tr>
    <td>{{ .Name }}</td>
    <td>
      <button
        hx-delete="/items/{{ .ID }}"
        hx-target="closest tr"
        hx-swap="outerHTML"
        hx-confirm="刪除這個項目？"
      >
        刪除
      </button>
    </td>
  </tr>
  {{ end }}
</table>

React 的適用場景

需要複雜的 client-side 狀態（多人協作、金融資料、圖形編輯器）
需要在瀏覽器端做大量運算（影像處理、遊戲）
重度依賴第三方 React 生態系元件（D3 圖表庫、Rich Text 編輯器）
團隊完全由前端工程師組成

HTMX 的核心理念：Hypermedia as the Engine of Application State

HTMX 的哲學基於一個概念：HATEOAS（Hypermedia as the Engine of Application State）。這是 REST 架構的原始定義，但 React 應用往往偏離了它。

HATEOAS 的意思是：客戶端（瀏覽器）不需要知道「當我按下這個按鈕，系統會怎麼變化」——伺服器在返回的 HTML 裡，已經包含了所有客戶端需要的指令。

<!-- HTMX：伺服器返回的 HTML 包含了下一個狀態的指令 -->
<!-- 伺服器返回：-->
<div>
  <p>你的訂單已確認！</p>
  <!-- 這個 HTML 告訴瀏覽器：當你點擊這個連結，去拿 /orders/123 的內容 -->
  <a hx-get="/orders/123" hx-target="#order-detail">查看訂單</a>
</div>

<!-- React：客戶端需要知道：按下確認按鈕 → 發送 POST /api/orders → 更新 state → 顯示新畫面 -->
<!-- 這些知識全部在 JavaScript 程式碼裡 -->

HTMX 的方式：伺服器返回的 HTML 本身就是應用狀態的完整描述，瀏覽器只需要執行 HTML 裡描述的行為。

HTMX 2.0 遷移指南

從 HTMX 1.x 遷移

# HTMX 2.0 可以通過 npm 安裝
npm install htmx.org@2

主要遷移項目：

hx-on → hx-on:

<!-- 1.x -->
<button hx-on="click" hx-delete="/items/1">刪除</button>

<!-- 2.0 -->
<button hx-on:click hx-delete="/items/1">刪除</button>

擴展引用 URL 變更

<!-- 1.x -->
<script src="https://unpkg.com/htmx.org@1/dist/ext/client-side-templates.js"></script>

<!-- 2.0 -->
<script src="https://extensions.htmx.org/dist/ext/client-side-templates.js"></script>

IE 支援終結：如果還需要支援 IE 11，繼續用 HTMX 1.x（官方表示會繼續支援）

如果要從 React 遷移到 HTMX

遷移 React 到 HTMX 的最佳策略是漸進式：

第一步：在新的簡單頁面使用 HTMX
第二步：把現有頁面中簡單的 CRUD 操作（HxDx）換成 HTMX
第三步：複雜的 client-side 邏輯保留 React
第四步：隨著團隊對 HTMX 越來越熟悉，逐步擴大使用範圍

總結：HTMX 不是銀彈，但它是正確的武器

HTMX 不適合所有場景。但當你的應用場景符合以下條件時，它比 React 更有效率：

伺服器已經有足夠的處理能力——HTMX 的工作方式是「讓伺服器多做一點，瀏覽器少做一點」
你的團隊更擅長後端——HTMX 讓後端工程師不需要學 React 的整個生態系
你需要快速交付——HTMX 的實現速度通常比 React 快 3-5 倍
你的 UI 複雜度在中等以下——HTMX 不擅長高頻率 client-side 互動

HTMX 2.0 的發布，是這個「回到基本面」趨勢的里程碑。當我們在 React 生態系中忙於管理越來越多的 abstraction layers，或許偶爾抬頭看看，是時候回到 HTML 了。