HTMX 2.1 hypermedia — 1년 운영 후 정착 패턴 8가지

핵심 요약

HTMX 2.1 production 1년. 사내 admin 도구 6개에 적용 — JS 번들 1MB → 14KB(htmx), 빌드 시간 -82%, 개발자 학습 곡선 1주. server-driven UI의 진가.

1. 정착한 8가지 패턴

1. Filtered list — hx-get + hx-target으로 검색 결과 부분 갱신
2. Inline edit — hx-trigger="dblclick" 더블클릭으로 편집 폼 swap
3. Infinite scroll — hx-trigger="revealed" 뷰포트 진입 시 추가 fetch
4. Modal — hx-target="#modal" 서버에서 HTML 반환
5. Form validation — hx-post 후 서버에서 에러 부분 갱신
6. Polling — hx-trigger="every 3s" 상태 자동 갱신
7. SSE — hx-sse로 실시간 알림
8. Optimistic UI — hx-swap-oob로 멀티 영역 동시 갱신

2. 코드 예시 — inline edit

  현재 값




  
    
  

3. 데이터

4. 적합한 케이스

admin/dashboard, CRUD 위주, 실시간 협업 거의 없음, SEO 중요. SPA 같은 풍부한 상호작용은 React/Vue 유지.

5. 함정

• Server load — 매 interaction이 서버 round-trip, 동시 사용자 많으면 부담
• 복잡 상태 — clientside state 많은 UI(드래그 등)는 hyperscript 추가 학습 필요
• Hyperview ergonomics — Alpine.js 같이 작은 client-side helper 권장
• Caching — hx-get은 GET, browser 캐시 적용. mutation은 POST/PUT, no-store 헤더