Boosting Links — HTMX

hx-boost mengubah link dan form biasa menjadi AJAX request — progressive enhancement instan. Boosting Links About Blog Saat link diklik: HTMX mengirim GET…

hx-boost="true" membuat link dan form biasa di dalamnya dikirim lewat htmx: request di belakang layar, lalu isi <body> ditukar, tanpa memuat ulang halaman. Bayangin map ordner di meja Laundry Bu Rini. Tanpa boost, tiap kali butuh halaman lain, seluruh map dibuang lalu diambil map baru dari gudang: sampul, ring, dan isinya. Dengan boost, mapnya tetap, cuma lembaran di dalamnya yang ditukar. Lembaran barunya tetap datang lengkap dari gudang, tapi sampul dan ringnya gak diganti.

🧪 Tebakan cepat: Halaman papan punya <body hx-boost="true">. Kamu klik link Laporan, lalu menekan tombol Back browser. Berapa request yang dikirim ke server untuk kembali ke papan? Jawabannya ada di bagian "Tombol Back".

Satu atribut untuk semua link

<body hx-boost="true">
  <header>
    <h1>Laundry Bu Rini</h1>
    <nav>
      <a href="/papan">Papan</a>
      <a href="/laporan">Laporan</a>
    </nav>
  </header>
  <main id="isi">...</main>
</body>

hx-boost diwariskan: setiap <a> dan <form> di dalam elemen itu ikut di-boost. Taruh di <body> untuk seluruh situs, atau di <nav> untuk menunya saja.
Nilainya ditulis lengkap, hx-boost="true".
Link-nya tetap href biasa. Kalau htmx gagal dimuat, link tetap jalan seperti biasa. Inilah progressive enhancement: halamannya tetap berfungsi tanpa JavaScript, htmx cuma membuatnya lebih mulus.

Yang terjadi saat Laporan diklik

Langkah	Tanpa `hx-boost`	Dengan `hx-boost="true"`
Request	browser memuat dokumen `/laporan`	htmx mengirim `GET /laporan` dengan header `HX-Request: true` dan `HX-Boosted: true`
Balasan	halaman penuh	halaman penuh yang sama, server gak perlu diubah
`<head>`	dibuang, CSS dan script diproses ulang	yang lama tetap. Dari yang baru, cuma `<title>` yang diambil
`<body>`	halaman digambar dari nol, layar sempat putih	isi `<body>` lama ditukar isi `<body>` baru (`innerHTML`)
Alamat	`/laporan`	htmx menulis `/laporan` ke address bar dengan `history.pushState`

Di Lab, tanpa boost satu klik memuat 3 file: dokumen, app.css, dan htmx.min.js (dua yang terakhir sering diambil dari cache, tapi tetap diproses ulang). Dengan boost cuma 1 request. Halamannya juga di-scroll ke atas, seperti pindah halaman biasa. Script di dalam <body> yang baru tetap dijalankan htmx, tapi <link> dan <script> di <head> baru diabaikan.

Form juga ikut di-boost

<form id="terima" action="/order" method="post">
  <input name="nama" placeholder="Nama">
  <input name="berat" placeholder="kg">
  <button>Terima cucian</button>
</form>

Di dalam <body hx-boost="true">, form ini dikirim htmx sebagai POST /order dengan body nama=Bu%20Tini&berat=4. Gak perlu hx-post: htmx memakai action dan method yang sudah ada.
Route Laravel-nya menyimpan order, lalu return redirect('/papan'). Browser mengikuti redirect 302 itu sendiri, jadi htmx menerima halaman /papan yang sudah memuat #15 Bu Tini, menukar body-nya, dan menulis /papan ke address bar.

Yang tetap reload, atau gak di-boost

Link ke situs lain, misalnya https://wa.me/...: host-nya beda.
Link yang diawali #, misalnya #harga: itu lompat di halaman yang sama.
Link dengan target="_blank", dan Ctrl+klik atau Cmd+klik: dibuka di tab baru seperti biasa.
Link atau form dengan hx-boost="false". Pakai ini untuk unduhan seperti /harga.pdf, karena kalau di-boost, htmx menaruh isi file itu sebagai teks di body.
Refresh (F5), atau membuka alamat langsung: browser memuat halaman utuh dari server. Makanya /laporan tetap harus bisa membalas halaman penuh.

Tombol Back

Sebelum menulis alamat baru, htmx menyimpan salinan halaman sekarang (isi body, judul, posisi scroll) di sessionStorage, sampai 10 halaman. Saat kamu menekan Back, browser memicu event popstate, dan htmx menaruh salinan itu kembali. Gak ada request sama sekali: 0. Itu jawaban tebakannya.

Kalau salinannya gak ada, misalnya tab-nya baru dibuka lewat alamat /laporan, htmx meminta halamannya ke server dengan header HX-History-Restore-Request: true, dan server membalas halaman penuh.

⚠️ Jebakan yang sering ketemu

Server membalas potongan untuk setiap HX-Request. Request boosted juga membawa HX-Request: true. Kalau route /papan membalas cuma potongan <li> saat header itu ada, link Papan yang di-boost menaruh potongan itu sebagai seluruh body. Cek HX-Boosted juga, atau balas halaman penuh.
Balasan error membuat klik terasa mati. Balasan 404 atau 500 gak ditukar, jadi halamannya diam. Cek tab Network.
Link unduhan di area boost. Beri hx-boost="false".
Nilai atau tempatnya keliru di latihan. Tulis hx-boost="true" di pembungkus yang benar-benar berisi ketiga link-nya. Di latihan form, hx-boost="true" dipasang di <form> itu sendiri, dengan action="/login", method="post", dan dua input ber-name.

TL;DR: hx-boost="true" di <body> atau <nav> membuat setiap link dan form lokal di dalamnya dikirim htmx: GET dengan header HX-Boosted: true (form memakai action dan method-nya), server membalas halaman penuh seperti biasa, htmx mengambil <title>-nya, menukar isi <body>, dan menulis alamat baru dengan pushState. <head> lama tetap, jadi CSS dan script gak diproses ulang. Tombol Back memulihkan salinan dari sessionStorage tanpa request. Link ke situs lain, #..., target="_blank", Ctrl+klik, dan hx-boost="false" tetap jalan seperti biasa, dan tanpa htmx semuanya tetap berfungsi.