Subscribe
Share
Share
Embed
Join me while I learn HTMX and talk at you about it
Twitter: @htmxlabs
So our next request header is the HX boosted request header. This is either there or not there, like a lot of these headers. It just indicates if the request came in from an element with the h x boost attribute on it. So so we discussed h x boost before, the attribute, where it's just h x boost equals true, and this is one of those sort of magical attributes that you just added and it does something magic. In this case it sort of magically transforms your app into an SPA.
Lazarus:So you're no longer, you know, refreshing the whole page when you click a link. Instead it's turning your regular links into AJAX, and some of you old timers will remember, something called pjax a long time ago that was a special tool that did this. There's also turbo links. So there's kind of a precedent for this, but HX boost is just a really simple way. You can add HX boost to the parent, to your like to your body app, and it will just turn all your links into this hxboost.
Lazarus:So it's turning your clicks instead of going to the server and refreshing the page and, you know, sending the browser on a new thing, it is turning that click, sending an ajax request instead, and then it gets the response and it swaps out the entire body tag. And so there are things so some things to look out for, to be sort of wary of when you're using h x boost. So the purpose of this header, and you know we've talked about hxboost and what you can do with it, that's a sort of separate episode, but the purpose of this request header, hx boosted, is to help you deal with anything unexpected. That's sort of my take on it, because by default you're not going to need it. You just to be clear, like, this is normally you don't need to check anything about that header, but this lets you branch your server code based on whether or not this request came from an HX boost.
Lazarus:So why would you need to branch it? Well, if you have a good amount of JavaScript in your app, you know, HX boost is doing something unusual. It's sending everything, taking that body tag out, swapping the body tag. The JavaScript is just gonna be handled differently. So it might not necessarily load everything twice.
Lazarus:You know, you don't want it to load everything twice. If if everything's already loaded, that's the advantage it's giving you, you know, it's giving you the SPA field because everything in your browser is already set, you've already loaded all your JavaScript, you run this, and it just gets swaps out the body tag, but you might want to have it run certain things even though it's an hxboost. You might want to, load certain files again. You know, it's not gonna reload all your CSS because why would it? It's not supposed to change every click, all your CSS files that you've loaded for your site.
Lazarus:You we don't want that normally. So by default everything's going to work smoothly just the way you want, but especially if you have a site that has a lot of, you know, third party JavaScript plugins, it has some CSS that maybe you want to change for some reason. This just gives you the fact it's doing something different when you do an h x boost. It's treating things a little differently than what you expect or then maybe what your 3rd party plugins expect. So you might want to branch your server code based on whether it's coming from an HX boost or not.
Lazarus:So that's where the HX boosted request header comes in. Your server, your code knows whether this is just a body tag getting swapped out, or if it's a full page request. And maybe that means you pass a different template. Maybe it means you run an additional check. Whatever it is, it's for when you have a special case and you need more control.
Lazarus:That's what these request headers are all about. Most of the time you're never looking at them. You don't need to, but it's sending these all in the background just to let your server know what's happening. So when you're in a jam, something's happening that isn't expected, you've got some special setup on your on your app, there's always a reason, you know, for this for something unexpected to happen. There is, you know, you can trace it back.
Lazarus:You can find out what it is. So how do you trace it back? You know, if you don't know whether it's an h x boost or not, how are you going to debug it? You know, if the server doesn't know, how is it gonna check? So this request header is sent to let you know if that's the issue.
Lazarus:If there's something that about the h x boost, then you can check the h x boosted header. So you can deal with it on the server side, branch out if you need to, and just kind of have control over that HX boost experience, which is awesome, and, you know, it's a great thing to use, converts you to an SPA, but if you come across issues, you just check the HX boosted, See if there's something you can do that will, you know, that that just helps you, work through that if there are any difficulties, and then everyone's happy, especially you.