HTMX hx-boost allows you to “boost” normal anchors and form tags to use AJAX instead ¶
The hx-boost attribute allows you to “boost” normal anchors and form tags to use AJAX instead.
For anchor tags, clicking on the anchor will issue a GET request to the url specified in the href and will push the url so that a history entry is created. The target is the <body> tag, and the innerHTML swap strategy is used by default.
All of these can be modified by using the appropriate attributes, except the click trigger.
For forms the request will be converted into a GET or POST, based on the method in the method attribute and will be triggered by a submit.
Again, the target will be the body of the page, and the innerHTML swap will be used.
Here is an example of some boosted links:
<div hx-boost="true"> <a href="/page1">Go To Page 1</a> <a href="/page2">Go To Page 2</a> </div>
hx-boost is inherited and can be placed on a parent element
Only links that are to the same domain and that are not local anchors will be boosted
All requests are done via AJAX, so keep that in mind when doing things like redirects
A general question for the general channel! (Sorry for the long post).
When using htmx, I find myself striving a lot for “no page reloads”. But today, I am wondering if it is really worth the effort, as I realize it sometimes requires small “hacks” and adaptations in my code that are specific to that goal, and that drives me away from writing “normal” web applications.
I don’t know if you share my opinion on this, but I would like to receive feedback on whether you use hx-boost or not. And if so, do you use it sparingly, or do you try — as me — to have a full “no reload” experience?
Htmx is more of a toolbox that gives you low-level primitives to deal with swapping, while apps like Turbolinks (or htmx’s hx-boost) are acting at a higher level, boosting the experience without you (the developer) thinking much about it.
What do you think? Thanks for your feedback. [09:39] And in the end, I tend to think that it might be easier in terms of maintenance to simply boost all pages at the body level, without doing any particular low level/manual swapping in the app, and render the full body at each interaction. The server-side app would stay classic, and progressive enhancement would work out of the box.
Or forget about the full “no reload” goal, and only improve small parts of the application using htmx when a reload really degrade the experience.