hx-boost속성은 앵커와 폼 태그에게 AJAX를 사용을 부추긴다. 이것은 좋은 부작용이 있다, 만약 유저가 자바스크립트가 없어도 사이트가 동작할 것이다.

타겟은 <body>이고 innerHTML을 swap한다.

<div hx-boost="true">
  <a href="/page1">Go To Page 1</a>
  <a href="/page2">Go To Page 2</a>
</div>
<form hx-boost="true" action="/example" method="post">
    <input name="email" type="email" placeholder="Enter email...">
    <button>Submit</button>
</form>

노트

  • hx-boost는 상속되며 부모요소에 넣을 수 있다.
  • 오직 같은 도메인 링크이거나 로컬 앵커가 아닌 링크들만 부스트 될것이다.
  • 모든 요청이 AJAX에 의해 되으로 redircts와 같은 것을 할 경우에 주의해라.
  • 만약 요청이 부스팅된 앵커이거나 폼인지 알고 싶으면, 요청헤더에 HX-Boosted를 찾아봐라
  • 선택적 부스팅 취소는 hx-boost="false"이다.

오래된 사이트에 hx-boost를 넣어 향상 시킬수도 있고 자바스크립트가 없는 환경에서 더 좋은 유저 경험을 위해 넣을 수도 있다.