The Problem

I've recently experimented with HUGO and it really surprised me how much I like how simple and fast it is compared to Gatsby and NextJS, the static website builders I've dealt with before.

The most important drawback from my perspective is that Gatsby produces

• traditional static websites, where each site-internal navigation re-requests all common dependencies and loses all state, whereas the other two make
• SPAs, where site-internal navigation does not cause common Javascript to be reprocessed.

While the advantages of SPAs are many, I'm only focusing on the points regarding in-page navigation:

• It's faster. It's important to keep site navigation fast to avoid exposing a re-rendering of common page elements to the user (experienced as annoying flickering of the menus or even the page background). Static website pages can be served in 50ms or so, but browsers usually can't do the rest quickly enough if they need to evaluate the scripts again. For example, the bootstrap docs, built with HUGO and quite responsive, are still not fast enough: It often flickers on navigation - even though the main content is loaded in less than 100ms.
• State can persist. That's important because many Javascript tags used on traditional non-SPA websites can make use of that: For example, a chat window enters the screen in an animation, but only the first time - it then just stays where it is on internal navigation.

I'm asking here how I could, while keep using fast and simple HUGO, still at least get these two advantages.

A possible solution?

A somewhat hacky but very general approach I could think of would be to write a generic piece of Javascript that, just like SPAs,

• intercepts browser navigation,
• modifies all a tags to intercept clicks,
• loads new pages with AJAX on those clicks rather than allowing browser handling,
• change the content and fix the history.

In my case, I'd be perfectly happy to have the restriction to have the same head element and immutable outer layout (menus should be within that and still get loaded every time) except for a select few items such as the page title.

So, my questions here are

• Is there an easier way?
• Is there a problem with this approach I don't see?
• Do I have to write this myself or is there already something I could build upon?