How do you deal with reloading/back/forward a page when using hx-push-url?

[kkawabat]

I have a simple landing page with a navbar with 3 items "My Blog" "My Social" "My Contact".

When I press on any of the nav items e.g. "My Blog" it makes an htmx request to fetch the blog data, populate a content div on the webpage, and update the Url to "www.mysite.com/blogs". Below is my My Blog nav item:

<h3 id='header-blogs' hx-push-url="true"hx-get="/blogs" hx-swap="outerHTML" hx-target="#content_div">My Blog</h3>

This all works good however whenever the user refreshes the browser it only loads the content_div that the blog was on. it does not refresh all the other components on the landing page.

My current hack is to check to see if "HTTP_HX_REQUEST" exists in the header on the backend if it doesn't return the landing page with a flag that I can then use javascript to click on My Blog nav item programmatically.

Here is my django backend logic:

def blogs_view(request):
    if request.META.get("HTTP_HX_REQUEST"):
        blog_list =get_blog_list()
        return render(request, 'blogs.html', context={'blogs': blog_list})
    return render(request, 'index.html', context={'active': 'header-blogs'})

And my django template/javascript:

    {% if active %}
        $(document).ready(function(){
            $('#{{active}}').click();
        });    
    {% endif %}

This isn't ideal because I have to add unnecessary javascript and it also messes with the history since I've pushed www.mysite.com/blogs twice (once when I reload and another time when I programmatically click on My Blog)

I might just be completely using HTMX wrong.. any help is appreciated.

[nickchomey]

Perhaps there's an HTMX solution for this that someone will share, but I'd recommend looking at making a pwa. Or at least using a service worker. You could cache the app/site shell in thr browser such that it is always loaded instantly without network latency. Then the content could be fetched and swapped with htmx stuff

[Telroshan]

Hey, I think your issue here is not related to refreshing a page itself.
If you're going to use push-url, it means the URL should be accessible from a very new tab without any history, right?
So you could like bookmark www.mysite.com/blogs and access that page directly, without going through the website's root first.

a flag that I can then use javascript to click on My Blog nav item programmatically.

As such, it doesn't seem to be an ideal solution to me to generate first, an "empty page", then trigger some client side logic to only go back to the server again and fetch the content that user was asking for in the place, by accessing that specific page URL.

It seems to me you'd have the same problem than the one you're having here, by opening a new tab instead of refreshing your current page; the situation is the same: the browser makes an initial request to the page, and it's indeed up to your backend to determine whether a full page should be rendered (with head body etc.) or just the partial content that you'd be after when using htmx.

Solutions that I can think of:

• Using that same if statement you have here in your backend to determine if it's a full page load or a partial request, use it to "pre-populate" your page's content if that makes sense.
  It is pointless to render the initial page without the blog list, if you already know you're going to trigger some client side logic on load to get that very content. It's just going to cost an additional server roundtrip, provide a poorer user experience, for nothing. To achieve that easily, you might want to look deeper into your backend's templating system
• You could also use a slightly different approach to get rid of that if, which can help make things clearer in your code. That's the thing I tend to do on my own projects btw, as I like to have explicit & confusion-less routes in my backend. You could define a separate route for that htmx request, than the URL you're pushing. For ex, define a /partial/blogs-list that you would hx-get on, but use hx-push-url="/blogs". Such as:

<h3 id='header-blogs' hx-push-url="/blogs" hx-get="/partial/blogs_list" hx-swap="outerHTML" hx-target="#content_div">My Blog</h3>

The URL in your website would still become www.mysite.com/blogs when clicking that nav item, but in your backend you wouldn't need that header check, since you'd know that accessing the /blogs URL means it is a full page load (page refresh, or access via a new tab). The thing i like about this approach is that it removes any confusion in your code, as you'd have an explicitly different URL for your partial request (made by htmx when clicking on the nav item) than the full page itself

• You could also always send a full page HTML and use hx-select on your frontend to only grab & swap the portion you want. This way, you wouldn't need to differentiate anything on your backend, as a full page load or a partial request would be the same thing for it ; the backend wouldn't care and wouldn't need to care.
  That's not my favorite solution though, as why bother rendering a full HTML on your backend if you know you only need a small portion of it? Especially given that this might imply additional DB requests to get some data & build some HTML, that you're not going to use in that partial request anyway

Hope that helps!

[carlos-verdes]

I created a middleware to handle this situation.
The middleware check if a request has the header hx-request, if it does it serves the content as it is, if it doesn't it wrap the content using the full page template.

So first you load full template (as the browser don't send the header), then user click on a hx-get control with push-url... the middleware will not wrap the content so the server send just the content needed... if the user refresh the website the middleware detects the lack of the header and wrap again the content with the template.

This way your endpoints/templates/pages don't need to deal with custom flags / ifs in their logic.