Subscribe
Share
Share
Embed
Join me while I learn HTMX and talk at you about it
Twitter: @htmxlabs
So the first request header we're gonna do is a checks request, and this is the most important, the most essential, maybe the only header that you really need, for for day to day use. Maybe. And h x request is always sent with every single h t m x request, and the value was always set to true. So it's just a way for your server, your back end, to know whether this request is coming from HTMX. So why would you want to do this?
Lazarus:The primary use case for this is probably checking to see whether to return a partial snippet of HTML or to return the full page with everything. So any back end system you're using will let you access these request headers in different ways. And maybe it's worth just stepping back, you know, what is a request header? Every single request sent to a server has these headers, whether it's AJAX or not, you know, whether it's AJAX or not actually will be part of the request header so that your server can know that to and you might have code to treat things differently based on how they're coming into the system. You know, it's also sending what type of request it is, post, get, put, stuff like that.
Lazarus:So all these headers are kind of built in, and all the ones that we're going to be talking about here are just h t m x headers on top of your regular ones. And, you know, headers are a key value pair, generally. So they have the key, the name, and then they have their value. So that's just some some quick background to on the headers. But any back end system you're using will let you access those request headers in different ways.
Lazarus:So if you're using python, it would be like request dot headers. If you're using Laravel, they have a a helper request object. So you do requests, arrow, headers, and then the name of the header, h x request, to check whether it's there. They actually added into their documentation recently an example, so I'll link to that just so you can see. And they added an example of specifically this case where you want to check the h x request header and then branch out based on whether it it's there or not, whether you return the full page or whether you return a partial, you know, HTML snippet and using blade, which is their templating language.
Lazarus:So whatever your templating language is is, or right, you're just returning straight HTML, you're still going to need to have that core of you need to be able to sometimes return a snippet and sometimes return the full page from the same URL. And the reason this is important, particularly if you are using this hx push URL or hx replace URL, So you may want to affect the URL bar up top, and this is all optional, you don't need to do this, but let's say I think the example I gave before was like you're looking at a specific account and you click in to see the details of the account. So maybe you want to push that route, account slash details, up to the top so that your user, if they refresh, it will show all the details again. It'll load that same page with the details. Because if you don't do that and you refresh the page it's just going to go back to not showing the details.
Lazarus:This is a decision up to you, you know, you might not care, you might just want to load the snippets, and then you don't really need to think about the h x request. But if you want to push things to your URL and you load the snippet with that URL that you're pushing, the account slash details, what happens if you push that up to the to the URL bar and then they refresh? It's just going to load that single snippet that you put in there. So that's why you would use you would check this h x request header. And if that route just returns a snippet it's going to be incomplete wrong.
Lazarus:So you would have the route, the same route, do 2 different things. 1, if it has the HSS require, show the snippet, show the fragment, just load that little details. If it does not have that hx request header, then the browser needs to to load the full page, it needs to go and and, you know, have the root element, the root of your HTML with all your head information, head, body, all that stuff, all the all the different things just to return the full page. So you can do this with a lot of your snippets if you want to, so that as you're clicking around, you know, it gives the user a nice experience because they can go backwards and forwards and they get, you know, they get the partial loads that they got on their page. If they then go back those partials disappear.
Lazarus:So that might be the user experience you want. And, you know, if you think of it as a new page, you're loading something, and you're filling that page with different information, you know, if you want to think of that as a new link, a new URL, then that's great. HTML lets you do that, lets you put that up in the bar, lets you do this. So this is just this is sort of essential if you want that experience. You need to be able to check those hx request headers.
Lazarus:If it's true you return the snippet, if it's false you return the whole page. So, but, you know, like I said this is all optional. One of the nice things about h tmx is just that simplification of just having these smaller bits of straight HTML that you load around your page and place where you want. So there's no need to over complicate it and make everything also return the full page and push everything to your URL bar, you know, that's not that's not necessary, this is just a user pattern that you might want to follow, or that you might want in special cases. So when the user needs to be able to refresh and see everything that was loaded as a snippet originally.
Lazarus:That's when you need this conditional, and that's when you need to check the h x request header.