Subscribe
Share
Share
Embed
Join me while I learn HTMX and talk at you about it
Twitter: @htmxlabs
So our next response headers here are hx push URL and h x replace URL. And I'm gonna do both at once similar to the attributes. So these response headers probably should sound kind of familiar if you've heard if you've, you know, seen some of the other attributes or or listened to some of the other things because they have the attributes have the same names just kind of, you know, a different capitalization and and obviously very different usage. The attributes go right into your your HTML code. These go into the response headers that you are putting onto your request when you send it back to, to the client.
Lazarus:So the idea here is that you can push a new URL to the browser's URL bar, and not just a new URL. So it's not just putting the URL up there, it's also the entire history state, and an HTML snapshot of that browser history goes into your browser, so the browser can go back, or forward. So push URL, h x push URL response header, adds a URL to that stack and a snapshot. And the replace URL replaces the current history snapshot with the new URL and the new snapshot. So, you know, you'd have slightly different ways you wanna do this, but both of them work very similar.
Lazarus:They do basically the same thing as the attributes that you would put on your front end. But like all these response headers, they get sent to the front end from the server. So they get sent from the server. You you have control over this on the server side. So in your responses, even if the front end didn't use push us push ur hx push URL or hx replace URL, you can set the URL bar for the users.
Lazarus:And this is like this is very sort of low level stuff. It's kind of interesting stuff you can do with the browser and the browser history. This gives you a lot of power over how the user interacts with the site. But anytime you're doing these kind of low level things, you need to sort of be aware of the, the ramifications of it. It means you need to consider what happens.
Lazarus:So if you're pushing a URL to the URL bar, you have to consider what happens to that URL when it gets shared or when the user refreshes. So I'm just gonna use the same example again that I used back doing the episode about the attribute, h x push URL and h x replace URL. So you've got, you know, slash account. So you're you're in there you're logged into your system, your users are logged in, they're looking at their account, they click something to load more details. So maybe it's a user history, shows you all the things you've done as a user.
Lazarus:So the details are loaded into a div and you just you use h x get to /account/details. So when they click it does h x get to slash account, slash details, you have an hx target to put that information that comes back from that, partial, that puts it in the right place on your page. Right? So this is, you know, your server gets the request and sends it back. So now you can use the HX push URL response header.
Lazarus:So, you know, you didn't have anything, there was no attribute that said anything about pushing to the URL on the client side, but you've decided on the server side that you want to do h x push URL or replace URL, let's do push URL, and you want to put that slash account slash details up there for the user so they can sort of go back to the page before it had all the details in it. Right? So that's the sort of use case here. You you you're not loading a new page exactly, you're loading a snippet, but you want to feel to the user like they're navigating to a new page. So you can put up that URL bar and when they press back it's going to remove the slash account, it's going to go back to slash account, it's going to remove those details, and when they press forward it's going to go back to the page with the details, and it'll have the slash details up there.
Lazarus:So that's that's what you'd use it for, that's the cool thing about it. That's fine, that's great for the immediate browser history back forward, but what happens when the user refreshes on slash on slash account slash details? Well, that URL is meant to return just a snippet. Right? We used h x get slash account slash details and it returns just a little snippet.
Lazarus:So by default, our refresh will just load and return that little snippet. That's not what you want to see. That's not what your users, expect. That's not they're gonna get this like they lose their whole page, they just get this little snippet of HTML if they refresh. So that's not good, that's not right.
Lazarus:So this is a big pattern in HTML because you're you have all these partials, you have all these little bits of HTML going around, and that's why I think it bears repeating. I've said this a few times. Anytime you're pushing URLs to the URL bar, that's a very cool thing you can do, but whether it's through the attribute or through these response headers, you need to account for the user refreshing them. And you do this by checking the h x request header. So the this is a separate, you know, separate to the response headers.
Lazarus:There's a there's request headers, which we went over before, but, the h x request header basically is a check to see if this is a request from h t m x or if it's a full page refresh. So as we found out before a few episodes ago there's also the h x history restore request. So there's a couple request headers that you can check, just to make sure you're getting the behavior that you want. So if it's a full refresh, you want to return the full page with that partial. If it's just a regular HTML request, you just want to return the partial, the little snippet of HTML.
Lazarus:So that makes sense, right? This is we sort of have have gone over this idea before, but it's this is like one of those big things that, it's kind of a gotcha. So these response headers let you do the same thing as the attributes. They let you push to the URL bar, they let you replace the URL, they let you mess with the browser history, but they let you make that decision from the server side. So all of these caveats apply when you're using this kind of low level power to mess with your browser and and add your browser add things to your browser history.
Lazarus:So, all of that to say that if you're going to use the hx push url and hx replaceurl response headers, just like the attributes, you do need to also keep in mind that you should be checking the request headers to figure out whether you should return the full page or whether you should return the HTML partial or snippet.