Htmx response headers: HX-Location and HX-Redirect
Alright. So we're starting up the response headers in HTML, and these are headers that your server sends back to the client. And you can there's different ways to send them, you know, it depends on what your back end setup is. Any back end setup will allow you to send these headers. And I will say that the same caveat that I'm putting for, like, all the advanced attributes and now every single one of these headers, Most of the time you do not have to think about these and you might never need to use them, but you can do cool stuff with them.
Lazarus:So we're gonna go through them every single one, 1 by 1. So I'm gonna include include 2 response headers in this episode because they're just they basically end up in the same place, but they get there in very different ways, and they do different, you know, it's a different experience for the user. H x location and h x redirect response headers. So both of them let you set a new page. It's a new URL, so you pass the URL that the browser is going to go to.
Lazarus:And you might wanna do this after you your user creates a new item in the system. So maybe, you know, they're building some sort of, you know, I don't know. I I have all these niche apps that I work in, so I can use those, but, like, let's say they create a new account or something like that, or or they create a new page or whatever it is. So you wanna create that new page and then you wanna browse them to that new page. So that page doesn't ex doesn't exist when they first created it.
Lazarus:Right? Like before. So you can't like decide ahead of time, oh, here's the page to go to afterwards because that page doesn't exist. So your server knows where that page is. So this sending back a header saying to redirect to that new page, is a good way to do it.
Lazarus:And you probably have already done this a bunch, if you're using different back end systems, they let you just redirect anytime to a new URL. So why would you use the h x redirect and the h x location? So there is a key difference. An h x redirect, I will say is basically the same as just doing a, you know, regular redirect through whatever system, you can even like send a location thing. So but there's a key difference between h x redirect, which is the basic one, which just takes you to that page and refreshes.
Lazarus:Standard browser refresh. So every, you know, every system will have that already, Laravel, Rails, Django, all that stuff. Even just HTML has just the location in the header. So that's what the h x redirect does. The cool thing that you can do, that kind of unlocks some of the h t m x stuff is h x location does not do a browser refresh.
Lazarus:So it essentially simulates that h x boost functionality, which we've talked about before, which h x boost, just as a reminder, it it turns a regular link inside your system into an ajax call. And it sends the ajax call when you click the link and then it the response that comes back it swaps out the body, it puts the new, you know, puts the URL that you clicked up in the URL bar. So that's HX boost, which is very cool, kind of turns your app into into sort of an SPA mode. And this ajax location header from the server does that as well. It basically does the same thing.
Lazarus:So pushes an AJAX call, so so you send that header back, your h tmx app, your page is going to make an AJAX call to the URL that's in the header you sent back, and it's going to push that new URL to the browser, it's going to replace the entire body tag with the response that comes back from that one, so you end up in the same place. It's just like hxboost, but you get there differently in that sort of s p a manner. You're gonna, you know, you will now be in the location that you sent, Just like if you had done h x redirect you'd be in that same location but you do a browser refresh, but you do a x x location and you are now there but you have not done a browser refresh it has just sort of swapped out the content of that page, it's put the URL up there, so it's kind of that nice little h x boost magic, but you can send it from your server. You don't have to decide ahead of time, in your in your client side, and and you can set what that URL is going to be, you can create that URL and then send them there as if they had clicked an h x boost target.
Lazarus:So that's cool. There's also some additional things that you get using h x location. It actually gives you a lot more. You can pass along additional headers. So basically you can turn this, you know, by default you just pass a URL.
Lazarus:That's just gonna do like an h x boost and all that kind of stuff. But basically you can turn this this entire thing into an h t m x API request if you want to. So all those things that you have access to as your normal ajax request in h tmx, you pass as a json array. So you can let's say the the path is required, so that's the so if you're not just sending, you know, with this header, if you just send a URL it's gonna go there. But if you send a JSON array then you have these things you can set, the path you can set which is the required one which takes you to the URL, but then you can set the target too.
Lazarus:So you can turn this into like an h x target situation where you're just saying which div to put this onto. It will load data load the data from the response to that target, and then you can also do select like an h x select, which allows you to, from the response pull out a CSS selector and place that into the target. You can also set the swap. So if you want to say outer HTML, inner HTML, you know, you have a list of items and it's a table and you want to add to the end of that you do the, you know, the closest tr and put it after. So you have these, you know, it it turns it into an extremely flexible, you know, maybe more flexible than you'll ever need.
Lazarus:Most of the time you're going to use hx location or hx redirect just to redirect to a new page nicely. And really h x location is the fancy one. It lets you do sort of this h x boost, but from the back end. And then h x redirect is just to do a regular refresh on a new page. And I'm going to include so so that's what the 2 of them do.
Lazarus:You know, they bring you to a new page. Their head response headers you send back from the server to redirect the user to a new page. They just do it in different ways, and they have a lot of different stuff you can add in there if you're using h x location. I'm going to include the link, to the docs, to the reference docs for h x location header, because there's a there's it gives a full list of all the different things you can send back, the different things you have access to, the different headers that you can send with it to sort of turn this h tmx request into, you know, a really customized HTMLX request, if you want it to be. So the next we're gonna we're gonna keep going through some of these response headers and and some of the stuff you can do from the server.
