hx-boost

Синтаксис

Изменяйте поведение целевого элемента, замены и истории с помощью соответствующих атрибутов. Для ускоренных ссылок всегда используется click.

Ускорьте несколько ссылок, указав родительский элемент:

<div hx-boost:inherited="true">
  <a href="/page1">Page 1</a>
  <a href="/page2">Page 2</a>
</div>

Каждая ссылка отправляет GET, добавляет свой URL в историю и заменяет содержимое элемента <body> с помощью outerSync.

outerSync заменяет дочерние элементы body и синхронизирует атрибуты body, не заменяя сам элемент <body>.

Ускорьте форму напрямую:

<form hx-boost="true" action="/example" method="post">
  <input name="email" type="email">
  <button>Submit</button>
</form>

Форма отправляет POST и заменяет содержимое элемента <body>, не добавляя URL в историю. Добавьте hx-push-url, чтобы создать запись в истории.

Расширенный синтаксис

Вы можете настроить поведение ускорения с помощью строки конфигурации, которая задаёт способ замены, целевой элемент и другие параметры непосредственно в атрибуте hx-boost. Используйте hx-boost:inherited, чтобы передать эту конфигурацию всем ускоренным дочерним элементам.

<!-- outerSync + select + target: pull #main from the full-page response and swap it in place,
     syncing #main's attributes (class, data-*, etc.) at the same time -->
<body hx-boost:inherited="swap:outerSync select:#main target:#main">
  <nav>
    <!-- These links inherit the boost config above -->
    <a href="/page1">Go To Page 1</a>
    <a href="/page2">Go To Page 2</a>

    <!-- Nested override: descendants of this div use a different boost config -->
    <div hx-boost:inherited="swap:'innerHTML strip' target:#sidebar">
      <a href="/sidebar">Sidebar</a>

      <!-- Per-element override: this link uses its own config, ignoring all inherited -->
      <a href="/modal" hx-boost="swap:beforeend target:#modals">Open Modal</a>

      <!-- Disable boost for this link -->
      <a href="/external" hx-boost="false">External</a>
    </div>
  </nav>

  <!-- Non-boosted htmx elements are unaffected by hx-boost:inherited -->
  <div hx-get="/data" hx-trigger="load">Loading...</div>

  <div id="main"></div>
  <div id="sidebar"></div>
  <div id="modals"></div>
</body>

Главное преимущество в том, что конфигурация ускорения применяется только к ускоренным элементам (ссылкам и формам), в отличие от наследуемых атрибутов hx-*, которые влияли бы на все дочерние элементы htmx.

Порядок приоритетов

Конфигурация ускорения переопределяет явно заданные атрибуты hx-* элемента:

1. Конфигурация ускорения (наивысший приоритет)
2. Явно заданные атрибуты hx-*
3. Значения по умолчанию (наинизший приоритет)

Это позволяет:

• Задавать базовые значения по умолчанию с помощью hx-target, hx-swap на элементах
• Переопределять их с помощью hx-boost:inherited на любом уровне
• Использовать hx-boost="true" или hx-boost="false" для включения или отключения

Поддерживаемые модификаторы:

• swap:STYLE — стратегия замены (outerSync, innerHTML, outerHTML и т. д.)
• target:SELECTOR — селектор целевого элемента
• select:SELECTOR — выбор содержимого из ответа (работает с outerSync; при выборе элемента, отличного от body, используйте innerHTML strip вместо innerHTML + select)

Ускорение ссылок

Ссылки ускоряются, если ведут на тот же источник в текущем окне:

<a href="/example">Same-origin link</a>
<a href="/example" target="_self">Same-origin link targeting this window</a>

Эти ссылки не ускоряются:

<a href="https://other-domain.com/example">Different origin</a>
<a href="#section">Local anchor</a>
<a href="/report.pdf" download>Browser download</a>
<a href="/example" target="_blank">New window or tab</a>

Примечания

• Все запросы выполняются через AJAX, поэтому учитывайте это, например, при настройке перенаправлений
• Чтобы узнать, был ли запрос вызван ускоренной ссылкой или формой, проверьте наличие HX-Boosted в заголовке запроса
• Отключайте ускорение для отдельных дочерних элементов с помощью hx-boost="false"
• Отключайте замену элементов при ускорении и их дочерних элементов с помощью hx-preserve="true"