最近、フロントエンドの複雑さを抑えつつ、手軽に部分更新ができるHTMXを使ってSPA（Single Page Application）を構築するケースが増えています。
私もある業務アプリケーションでHTMXを活用して、ページ全体のリロードを避けたUI構築を行いました。
しかし、そこでひとつ問題に直面しました。
問題：ブラウザの「戻る」ボタンで正しく遷移できない
HTMXでは、hx-get や hx-post によってHTMLの一部を更新することができますが、その際にURLは自動では更新されません。
そのため、ユーザーが操作中に「戻る」ボタンを押しても、意図したページや状態に戻れない、というUX上の問題が起こります。
これは、HTMXがデフォルトではブラウザ履歴に遷移を記録しないためです。
解決策：URLの履歴を正しく扱う2つの方法
方法1：hx-push-url 属性を使って履歴にURLを追加する
hx-getなどで部分更新する際、hx-push-url属性を追加することで、履歴にURLを追加しつつページの一部だけを更新できます。
<a hx-get="/api/customer/{id}"
hx-push-url="/customer/{id}"
hx-target="#content">
顧客詳細を見る
</a>
この例では、/api/customer/123 からデータを取得して #content に描画されますが、URLとしては /customer/123 に変化します。
これにより、ユーザーが「戻る」ボタンを押すと、正しく前の状態に戻ることができます。
方法2：hx-boost を使ってリンクやフォームをHTMXで処理する
もしページ内のほとんどのリンクやフォームをHTMXで処理したい場合は、hx-boost を活用するのも有効です。
<body hx-boost="true">
<a href="/customer/{id}">顧客詳細</a>
</body>
このように書くと、リンククリック時にページ全体をリロードせずに、HTMXが内部で処理してくれます。そしてURLもちゃんと更新されます。
つまり、通常のSPAのような挙動をHTMXだけで実現できるわけです。
まとめ
HTMXでSPA的なページを作る際には、ブラウザ履歴の扱いに注意が必要です。
特に、「戻る」「進む」などのナビゲーションを正しく機能させるためには、hx-push-url や hx-boost の活用が不可欠です。
・個別対応には hx-push-url
・全体的な挙動変更には hx-boost
このように用途に応じて使い分けることで、HTMXによるシンプルかつ快適なSPA開発が可能になります。