hx-boost

hx-boost 属性を使用すると、通常の a エレメントとフォームタグを「ブースト」して AJAX を使用するようにできます。これは、ユーザーが JavaScript を有効にしていない場合にサイトが引き続き動作するという 素晴らしいフォールバック です。

a タグの場合、a をクリックすると href に指定された URL に GET リクエストが発行され、URL がプッシュされて履歴エントリが作成されます。ターゲットは <body> タグで、規定では innerHTML スワップ戦略が使用されます。これらはすべて、クリックトリガーを除き、適切な属性を使用することで変更できます。

フォームの場合、リクエストは method 属性のメソッドに基づいて GET または POST に変換され、submit によってトリガーされます。ここでも、ターゲットはページの body で、innerHTML スワップが使用されます。ただし、URL はプッシュされず、履歴エントリは作成されません（URL をプッシュする場合は hx-push-url 属性を使用できます）。

以下はブーストされたリンクの例です。

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

これらのリンクは、それぞれの URL に ajax GET リクエストを発行し、ボディの内部コンテンツを置き換えます。

以下はブーストされたフォームの例です。

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

このフォームは、特定の URL に ajax POST を発行し、ボディの内部コンテンツを置き換えます。

メモ