HTMX client side routing?

Let’s say my user needs to be able to get back to a certain location in the app. For example we’ll say a tab. The htmx attribute hx-push-url allows me to update the URL in the bar when they click the tab. For example we could push ‘/tab3’ to the url bar.

Let’s say the user copied the location into an email and sent it to their friend. The friend copies it into their browser and hits enter. What do they see? How does it get that way?

I see in the documentation it says:

"NOTE: If you push a URL into the history, you must be able to
navigate to that URL and get a full page back! … Additionally, htmx
will need the entire page when restoring history if the page is not in
the history cache."

What’s the best-practice way to "get a full page back" on an htmx project? Assuming there’s something like Django or Flask on the back-end, I can certainly render the whole page with the correct tab having the "active" class and the content area with the correct content. But this seems duplicative, no? If it were a React/Vue project it would be possible to use the built-in routing facilities to render the page client side, correct? But what about on an htmx project?

If it’s not possible for htmx to do this client side routing and rendering, it seems like the most prudent approach to development might be to build everything without any Ajax behavior first, to confirm that all of the server side routing and rendering works correctly, and then add htmx sugar on top of that. Does this make sense as an approach or is there an established better way to do this?

Leave a Reply

Your email address will not be published.