wpnext
github wpnext
Cover Image for В ожидании HTMX 4.0: Fetch API, нативный стриминг и Idiomorph в ядре

В ожидании HTMX 4.0: Fetch API, нативный стриминг и Idiomorph в ядре

22 апреля 2026

HTMX 4.0 заменил XMLHttpRequest на Fetch API, добавил нативный стриминг HTML и встроил алгоритм морфинга DOM Idiomorph. Размер библиотеки — 14 КБ.

Переход на Fetch API и стриминг

В HTMX 4.0 убрали XMLHttpRequest. Вместо него теперь работает Fetch API.

Что это даёт:

  • Фронтенд получает HTML-фрагменты по мере их готовности, не дожидаясь полного ответа сервера
  • Можно строить потоковый интерфейс без тяжёлых фреймворков вроде React Server Components
  • Работает с любым бэкендом, который умеет отдавать HTML частями
  • Меньше клиентского JavaScript, проще архитектура

Idiomorph для морфинга DOM

Алгоритм Idiomorph переехал из расширений в ядро HTMX.

Как работает:
При обновлении страницы Idiomorph сравнивает новый HTML с текущим DOM и меняет только отличающиеся узлы. Это быстрее полной перерисовки.

Алгоритм основан на Morphdom из Hotwired, но использует более детальный подход к сравнению деревьев.

Наследование атрибутов стало явным

В версии 4.0 убрали автоматическое наследование атрибутов.

Было:

<div hx-target="#result">
  <button hx-get="/api">Нажать</button>
</div>

hx-target автоматически применялся к кнопке.

Стало:

<div hx-target:inherited="#result">
  <button hx-get="/api">Нажать</button>
</div>

Нужно явно указать :inherited, если атрибут должен наследоваться.

Это упрощает отладку — поведение элемента видно в его коде, не нужно искать родителя.

Обработка HTTP-ошибок

HTMX 4.0 больше не игнорирует ошибки сервера. При статусе 404 или 500 библиотека показывает содержимое ответа.

Новый синтаксис:

<div hx-status:404="#not-found" hx-status:5xx="#error-notice"></div>

Можно направить разные коды ошибок на разные элементы интерфейса.

История навигации упрощена

Убрали сохранение DOM в localStorage. Теперь навигация работает через стандартную перезагрузку страницы.

Поведение стало предсказуемее, пропали редкие баги с восстановлением состояния.

Элемент <hx-partial>

Добавили тег для явного указания целевого элемента прямо в ответе сервера:

<hx-partial hx-target="#sidebar">
  <div>Новое содержимое сайдбара</div>
</hx-partial>

Это заменяет механизм out-of-band (OOB) обновлений. Сервер может отправлять несколько фрагментов с указанием, куда каждый из них вставить.

Концепция близка к Turbo Streams из Hotwired.

View Transitions API по умолчанию

HTMX 4.0 подключает браузерный View Transitions API без дополнительной настройки.

Переходы между состояниями страницы (затухание, скольжение) работают из коробки. Не нужно писать CSS-анимации или JavaScript.

Что изменилось для разработчиков

HTMX продолжает следовать принципу гипермедиа: максимум возможностей через HTML и HTTP, минимум JavaScript.

Практические последствия:

  • Меньше кода на клиенте для тех же задач
  • Бэкенд на любом языке — главное, чтобы отдавал HTML
  • Подход подходит для контентных сайтов, админ-панелей, форм с живой валидацией

Для реактивных интерфейсов с частым обновлением состояния всё ещё предпочтительнее фреймворки вроде React или Vue. Но для большинства веб-приложений HTMX 4.0 закрывает потребности без усложнения стека.

Ещё почитать