T3R3Z1.PYROP3.N3T

I recommend hx-boost

hx-boost is an attribute provided by htmx that makes your website better with no downside. Really! As the page in the documentation describes, it makes <a>s that point within your website use AJAX. It swaps the body and pushes a history state, so it works exactly like an anchor normally does from the user's perspective.

This might sound like overcomplicating things with JavaScript for a potential speed improvement, but the reason you should highly consider it is the hx-preserve attribute. Put that (and a unique id) on content that you don't want to change when you navigate between pages, like a sidebar. Now things like GIFs will keep playing and there won't be flashes when things that should be static are refreshed. Importantly, literally nothing changes for (cool) users who (righteously) block JavaScript. It is perfect progressive enhancement.

Steps

  1. Add htmx to your <head>: <script src="https://cdn.jsdelivr.net/npm/htmx.org@2.0.8/dist/htmx.min.js"></script>.
  2. Add hx-boost="true" to your <body>.
  3. Add hx-preserve="true" to stuff that is static between pages (probably a sidebar/footer). Add a unique id if it doesn't already have one.
  4. Be happy that it works with and without JavaScript.

It really is that easy! Here's the commit where I added it to my site.