Subscribe
Share
Share
Embed
Join me while I learn HTMX and talk at you about it
Twitter: @htmxlabs
So today we're gonna talk about h x boost, which is a cool little attribute. I say little because there's just like there isn't it's not like a ton of options. It's just h x boost equals true or h x boost equals false. But it is actually, it's one of those kind of like, you throw it in and it changes everything on your page. Which so it's in some ways it's very powerful.
Lazarus:You can basically what you do is you can place that directly onto a link, or you can place it onto your whole site. So you could put it on the body tag. It's inherited, so everything below the tag you put it on will also get the h x boost equals true. But what it does is it takes your links, and when you click a link rather than, you know, going to just rather than doing a traditional, requests and moving the browser to that link and returning the whole thing, it's going to change all of your links into ajax requests. So behind the scenes, it will send the request, get the data back, and then it's going to swap out the whole body of your page with the body that comes back in the request.
Lazarus:So it kind of gives you that single page app, the SPA feel because that's really what's happening. It's replacing the HTML on the page, but it's not actually reloading everything. So it's not reloading your CSS. It's not reloading your JavaScript. It just doesn't have, you know, all your CDNs.
Lazarus:Every time you click a link, normally, your page, it does that quick because the browser has it cached. It's not a big deal, But this just takes away that step as well. So when you click a link, sends the ajex request, swaps out the body. So you get a very sort of smooth feeling from that. You get a smooth sort of, you know, one to the next when you click a link.
Lazarus:And this has been done before. This is not like, you know, specific just to h t m x, but it's a very cool little attribute thrown in. It's basically the whole concept behind, if if you're an old timer like me, there was a library called pjax back for jquery, which did basically the same thing. It's also the basis of Turbolinks which was a rails project that has now become something bigger called hot wire, or, you know, a framework called turbo and they're sort of, they're expanding it, which is sort of in the same family as HTMX actually. The concept of sending HTML over the wire, same as Laravel LiveWire.
Lazarus:So it's part of the sort of family of products that are, you know, of of packages and products and tools that are coming up that are using HTML rather than JSON. So it it has a lot of precedent for being used before. Another nice thing about it is it's like a, you call it a progressive enhancement. So if for some reason your HTMX didn't load or the browser that somebody's using has disabled JavaScript, it still works because you just all the a tags are all the l links are gonna work just as regular links. So the fallback is everything works as a regular link.
Lazarus:If h x boost is working and everything is fine and the browser doesn't have JavaScript disabled, it will do the fancy stuff, pull it from Ajax and replace the body. Also, you can refresh it at any time. So just because it's, you know, one of the issues with SPAs, a single page app in general, is that you lose the browser history. This So with this, you do not lose the browser history. It'll work just like a regular link.
Lazarus:You click the link, the URL up at the top is going to change. If you refresh, you're going to see the URL that's up at the top. It'll just reload it It's just as you would a normal link. So it both in both of those ways, it's kind of a progressive enhancement. It doesn't break anything that's built into HTML by using it.
Lazarus:And like I said before, it's inherited, so you can put the you don't have to put it on every link. HX boost eagle's true. HX boost eagle's true. You can just put it once at the root if you want your whole site to kind of work like that. And then all the internal links will use it.
Lazarus:If you want to disable it on a particular link and make sure that that link loads, maybe it's loading a new piece of CSS or a new java script, you know, whatever that is. If you want to load you can set HX boost equals false and then everything beneath that will be HX boost equals false and it won't have the sort of h x boost on it. And so what if you have something on your page that you want to persist? So this is like This is one of the cool things that it unlocks. So, let's say you have a video playing on your page.
Lazarus:If you hit a link while you're watching a video on most pages that are aren't SPAs, you are going to go to a new page. And even if that video is on the page, it's going to reload and the video will start at the beginning and, you know, that's just kind of annoying but that's just how websites in general work. But if you're using HX boost, you can set HX preserve equals true on any element. And when it goes and it pulls in the body and it pulls in everything else, it's gonna ignore that h x whatever is tagged as h x preserve equals true. It's going to ignore that and leave that in place and not replace it.
Lazarus:So if you have a video, or, you know, a podcast like an h t m x themed podcast that's running in the background or in the foreground, that will just stay in place. It'll be preserved through your your link click. So it's a really nice way. HX boost is a really easy and nice way to give your site that little bit of extra speed with basically no mental overhead and no downside, because it's progressive. Because if it doesn't work, then it just goes back to what it normally is, which is regular links.
Lazarus:And with the clever use of that h x preserve, you have a whole new range of possibilities that were previously, you know, unavailable with h with straight HTML unless you were using, you know, some sort of SPA front end JavaScript framework, which is to preserve things as you click through pages. Keep some section of your site so that it's not reloading every time. So you can keep a video running, you can keep audio running, all that kind of stuff. So it's a very cool little thing that unlocks a lot of power in HTMX.