Htmx – The Fetch()ening

5 days ago 4

htmx 4.0은 기존 XMLHttpRequest 기반 구조를 fetch() 중심 비동기 구조로 전면 교체하는 대규모 리빌드 버전
속성 상속 방식이 암시적에서 :inherited 명시적 선언으로 변경되어 코드 명확성과 유지보수성 향상
히스토리 캐시는 로컬 스냅샷 저장 대신 네트워크 요청 기반 복원 방식으로 단순화되어 안정성 강화
스트리밍 응답, SSE, DOM morphing, <partial> 태그, View Transition 큐 등 다양한 신규 기능이 코어에 통합
장기적으로 코드베이스 단순화와 확장성 개선, 기존 2.0 사용자도 지속 지원 예정

htmx 4.0 개요

htmx 4.0은 기존 구조를 전면 재작성하며, fixi.js 개발 경험과 5년간의 유지보수 교훈을 반영
주요 변화는 fetch() 전환, 속성 상속 명시화, 히스토리 캐시 단순화의 3가지 핵심 변경점으로 요약

The fetch()ening

XMLHttpRequest를 fetch() 로 교체하여 Ajax 인프라를 현대화
- 대부분의 사용 사례에는 큰 영향이 없지만, 이벤트 모델은 fetch()의 비동기 특성에 따라 변경
이 전환은 코드 단순화와 향후 기능 확장을 위한 기반 제공

명시적 속성 상속

기존 암시적 상속 대신 :inherited 수정자를 사용해 명시적으로 선언
- 예시: <div hx-target:inherited="#output"> <button hx-post="/up">Like</button> <button hx-post="/down">Dislike</button> </div>
- hx-target이 명시되지 않으면 하위 요소는 상속되지 않음
대부분의 사용자에게 가장 큰 업그레이드 변경점

히스토리 캐시 단순화

htmx 2.0의 로컬 DOM 스냅샷 캐시는 서드파티 수정, 숨겨진 상태 등으로 인해 불안정
4.0에서는 네트워크 요청을 통한 복원 방식으로 변경
- 캐시 확장은 선택적(opt-in)으로 제공
코드베이스 단순화 및 기본 동작의 신뢰성 향상

유지되는 요소

hx-get, hx-post, hx-target, hx-boost, hx-swap, hx-trigger 등 핵심 API는 동일
:inherited 추가 외 대부분의 프로젝트는 기존 코드 그대로 작동 가능
장기 유지보수성과 안정성 강화

업그레이드 정책

2.0 사용자는 업그레이드 프로젝트 필요, 그러나 2.0은 영구 지원
4.0은 2.x와 병행 배포, latest 전환은 2027년 초 예상
2.0 동작을 복원하는 확장(extension) 제공 예정

신규 기능 요약

스트리밍 응답 및 SSE 통합

fetch()의 Readable Streams 지원을 활용해 부분적 DOM 교체 가능
SSE(Server Sent Events)가 핵심 기능으로 재통합, 점진적 콘텐츠 갱신 지원

Morphing Swap

Idiomorph 알고리듬을 기반으로 DOM 병합 시 노드 보존·삭제 판단 개선
morphInner, morphOuter 스왑이 코어에 포함

<partial> 태그 지원

기존 Out-of-band swap의 복잡한 문법을 단순화
<partial>은 템플릿 요소로, hx-target, hx-swap 등 표준 속성 사용 가능
Out-of-band swap은 id 기반 단순 교체로 회귀

View Transition 개선

전환 큐(queue) 도입으로 시각적 충돌 방지
CSS 전환은 기존 방식 유지, 비동기 런타임으로 단순화
기본 활성화 여부는 미정

이벤트 순서 안정화

fetch() 기반 비동기 구조로 이벤트 순서 보장 용이
새로운 이벤트 명명 규칙 도입:
htmx:<phase>:<system>[:<optional-sub-action>]
- 예: htmx:before:request

확장성 강화

async 기반으로 사전 요청(preload) 및 낙관적 업데이트(optimistic update) 확장 제공
요청/응답/스왑 사이클을 확장 개발자에게 개방, fetch() 구현 교체 가능
핵(hack) 없이 원하는 동작 구현 가능

hx-on 개선

표준화된 구문 hx-on:<event name> 채택
비동기 API 지원으로 간단한 DOM 스크립팅 가능 <button hx-post="/like" hx-on:htmx:after:swap="await timeout('3s'); ctx.newContent[0].remove()"> Get A Response Then Remove It 3 Seconds Later </button>
eval() 비활성화 환경에서도 동작하나 일부 기능 제한

전체 방향

htmx 4.0은 2.0과 유사한 사용감을 유지하면서 버그 감소와 기능 향상을 목표
코드 단순화, 명시적 구조, 비동기 기반 확장성으로 보다 안정적이고 현대적인 htmx 제공

개발 일정

알파 버전(htmx@4.0.0-alpha1) 현재 공개
정식 4.0.0 릴리스는 2026년 초~중반 예정
2027년 초에 latest로 전환 예정
개발 진행 상황은 GitHub four 브랜치 및 four.htmx.org에서 확인 가능

Read Entire Article