Single-page-application with fixed header/footer with HTMX + URL browsing history

[josephernest]

I have an application with fixed header and footer (it is important that they are not reloaded when we navigate through pages). The attribute hx-push-url allows to have browsing history through the pages: we can use the "back" and "forward" buttons, and it works as expected:

index.html:

<style>
#header { background-color: yellow; height: 20%; }
#container { background-color: gray; height: 60%; }
#footer { background-color: yellow; height: 20%; }
</style>
<script src="https://unpkg.com/[email protected]"></script>
<div id="header">This is the header</div>
<div id="container">
This is the main container
<button hx-get="newpage1" hx-target="#container" hx-swap="outerHTML" hx-push-url="true">Go to newpage1</button>
</div>
<div id="footer">This is the footer</div>

newpage1:

<div id="container">Hello
<button hx-get="newpage2" hx-target="#container" hx-swap="outerHTML" hx-push-url="true">Go to newpage2</button>
</div>

newpage2:

<div id="container">Test</div>

After having clicked on "Go to newpage1" button, the container div is replaced by the content of newpage1 as expected and the browser URL is now http://127.0.0.1/newpage1.

Problem: if we enter this URL directly in the browser, we won't have the full page, but only the container <div id="container">...</div>.

What is the common HTMX solution to this problem when we build a single page application?