HTMX — HTML Attributes แทน JavaScript สำหรับ Dynamic UI

HTMX คืออะไร

HTMX ให้ HTML element สามารถทำ HTTP request และ update DOM บางส่วนได้โดยตรง — แนวคิดคือ server return HTML fragment แทน JSON แล้ว HTMX ใส่ใน DOM

<script src="https://unpkg.com/htmx.org@2.0.0"></script>

Attributes พื้นฐาน

<!-- GET เมื่อ click, แทนที่ #result -->
<button hx-get="/api/data" hx-target="#result" hx-swap="innerHTML">
  โหลดข้อมูล
</button>
<div id="result"></div>

<!-- POST form โดยไม่ reload -->
<form hx-post="/api/submit" hx-target="#status">
  <input name="name" type="text">
  <button type="submit">ส่ง</button>
</form>
<div id="status"></div>

Trigger Events

<!-- trigger ทุก 2 วินาที (polling) -->
<div hx-get="/api/live" hx-trigger="every 2s" hx-swap="outerHTML"></div>

<!-- trigger เมื่อ input เปลี่ยน หลัง debounce 500ms -->
<input hx-get="/api/search" hx-trigger="keyup changed delay:500ms"
       hx-target="#results" name="q">

<!-- trigger เมื่อ element เข้า viewport (lazy load) -->
<div hx-get="/api/more" hx-trigger="intersect once"></div>

Swap Modes

<!-- innerHTML = แทนที่ content ข้างใน (default) -->
<div hx-get="/content" hx-swap="innerHTML"></div>

<!-- outerHTML = แทนที่ element ทั้งก้อน -->
<div hx-get="/item" hx-swap="outerHTML"></div>

<!-- afterbegin = prepend, beforeend = append -->
<ul hx-get="/more-items" hx-swap="beforeend" hx-trigger="click"></ul>

Loading State

<button hx-get="/api/slow"
        hx-indicator="#spinner">
  โหลด
</button>
<div id="spinner" class="htmx-indicator">กำลังโหลด...</div>

.htmx-indicator { display: none; }
.htmx-request .htmx-indicator { display: block; }

กับ Astro (SSR mode)

---
// src/pages/api/fragment.astro
export const partial = true;  // บอกว่าเป็น HTML fragment
const items = await db.query('SELECT * FROM items');
---
{items.map((item) => <li>{item.name}</li>)}

เหมาะกับ: form handling, inline edit, progressive enhancement, server-driven UI — ไม่เหมาะกับ realtime collaborative หรือ complex state management