Subscribe
Share
Share
Embed
Join me while I learn HTMX and talk at you about it
Twitter: @htmxlabs
So the last request header we're gonna do here is hx history restore request. That's kind of a long one, the longest kind of most most niche header that we have. It's part of the history and browser headers. So there's a couple of them that you kind of just deal with, history management, back, forward buttons, cache missing, all this kind of stuff that, like, all of these you might never ever need. But if you're doing some sort of stuff with, passing, you know, pushing stuff to the URL bar.
Lazarus:And you kind of have got into that and and you like the sort of concept of, like, you when you click on something and it loads a new part of the page, you also push to the URL bar so that they can use the back button and unload that part of the page. This is just a cool thing that HTMLX can do. This is part of that front end user experience. A big part of HTMLX is passing around these snippets and partials of HTML to different parts of the page, and you have that control of whether you wanna say is this a new page or, you know, what happens when they refresh? Should they see the same thing or should it go back to before all those partials?
Lazarus:And that's kind of a decision for you and for your front end. If you decide to make to push the new URL when you load partials, you are introducing some complexity. This is where a lot of the magic comes from in htmx is the ability to do this. Well, you know, whenever there's this kind of magic there's always a trade off, right? So we've talked a few times on here about the situation of when there's a route that is meant to return a partial.
Lazarus:So you have hx, I'll just use the same examples before, hx slash you know let's say you're on an account, so slash account slash id slash details. So you click that it loads some additional details onto the page. So you can make the decision, do I want to just load those details onto the page and keep the URL the same so you're still just on the account page, and if you refresh the account page those details disappear. Or you can push that route that you just got, you know, it just returned a snippet of those account details, you can push that to the URL bar. So now we've got account slash id slash details up in the URL bar.
Lazarus:By defaults, the problem with that is that now you refresh that slash details and what do you get back? If you haven't done anything, if you've just have that partial loaded, it's just going to load that partial with nothing else. You're not going to have your rest of your page. So that kind of ruins that the refresh. So when you're using the push URL, you need to start thinking about, 'am I going to return the partial or am I going to return the full page?' You know, with that partial in there.
Lazarus:And we've, you know, we've talked about that a few times. Usually what you're gonna do is you're just going to check the h x request header, so that your code can branch off. If it's an htmx request then you want to return the partial. If it is a just a page refresh, you know, not an HTMX, not coming from an hx get, not loading a partial, then you want to just return the whole, the whole page with that, you know, partial also that snippet also included. So that's the situation that's sort of the baseline for this new header, this history restore request.
Lazarus:You're you're already doing that, so that's when you sort of move to the next level of browser concerns. So that's if you're just kind of, clicking and you wanna refresh. Now what if you start moving back? Your browser sort of caches these things. HTMX is actually keeping track of your history for you.
Lazarus:So it's taking these snapshots like a stack putting them into the browser. You can decide if you're pushing your stack pushing your your, URLs to the stack. So you have you now have control over that, but HTMLX is keeping track of your history for you. Now when you press the back button or the user presses the back button, HTMLX has each URL, you know, in the stack associated with all the values and all the data and all the dom that goes with that. If the location is not found in the stack, so you go back and it's just not in your in your browser history, it doesn't have the data for it.
Lazarus:Then it'll look at the URL and it'll request the URL from the server again. Htmx will request it and just say, okay, you know, I don't want to just show nothing. I want to go back to the server and pull in what should be there because this is the back button is just meant as a convenience and it caches things, right? But ultimately you should be able to refresh anything in that back and it should load again from the server. That could be the way that browsers operate by default, but, you know, it's caching stuff for you to make it faster and everything like that.
Lazarus:So it's going if it doesn't find it in there, if it doesn't have everything that it needs, it's going to make that request to the server. Now, when that happens, so that's your scenario, you've pressed the back button a few times, you've reached something that is not saved fully in the cache, and when that happens it's going to send this header, this hx history restore request. So, you know that name, hx history restore request, you're in the browser history, you want to restore a request that was made. That's sort of what it means. So, it just means you know it doesn't have a snapshot cache.
Lazarus:So it tells your server we need this full page. This is not a time to return a snippet. So, in your logic for whether or not you return a full page or a partial on a root so this is coming from HTMX. So if your logic just says, okay, if it's coming from HTMX, return the partial. If it's not coming from HTMX, then return the full page.
Lazarus:You know, that's the sort of general full page refresh. That's not gonna capture this scenario because it is coming from HTMX. This is a a a request to fill this page, to fill this history, it's coming from HTMLX. So it is gonna have that h x request. So if you just check that it's just gonna return the partial.
Lazarus:Right? And that's not what you want. So this is a request header that is telling you you need to return the full page anytime you see this. Maybe there's another use for it. I don't think, you know, maybe you want to check something else.
Lazarus:99% of the time, if you are if you see this header, if your server sees this header, you're just using it to say, okay, if this header is here, return the full page. Okay. So whatever your logic is, I don't think it needs to get more much complicated than that, you know, when it comes to this header. Whatever your logic is to display a partial versus display the full page when you're when you're loading stuff, and you may never even use that, but if there's logic there to to split between the partial and the full dom, just add this header to that logic. If this header is here, always return the full page, the full dom.
Lazarus:Again, you might not need this. This is really only if you're starting to use and getting into the fancier kind of hx push URL or replace URL when you're starting to mess with this browser, your browser controls and your history, and doing these sort of advanced things. So you do need it when you start doing that though, you know, and it's just a good thing to remember that this is going to be something you'll add to your logic and return the full page. So I am going to include, a couple links along with the, description of the of the episode, in the show notes that discuss it. 1 is just the hdx documentation on it and then the other one is actually very useful.
Lazarus:It's a GitHub issue thread, where the header is discussed. So, you know, you can click into those and just kind of it might help to read it rather than just kinda hear about it and see some code examples and that kind of stuff. So that is the last of the request headers. And the next thing we're going to do is go over every single response header and maybe have some other, you know, episodes in between just for fun. But, yeah, we're gonna go over every single response header, next.