Single Page website - navigate to page without reloading navbar and any part of header or footer

In a single page web application which is a public website , how do you avoid redundant resource loading when only loading a part of a page and changing url using "history.pushState" .

Let's say we have a public website with multiple web pages - index.html , page1.html , page2.html , page3.html.

**Scenario 1 :**when mydomain.com is opened, the index.html gets loaded along with all the required Images , CSS , Javascript resources. At this time the Header and footer for the website get constructed and rendered on the client browser.

Now when the user clicks on a link on nav bar , the page1.html is loaded in a specific element of the webpage and then history.pushState is used to change the URL. The navbar , header , footer stay still without getting reloaded. It is clear until here.

Scenario 2: But what if someone goes directly to mydomain.com/page1.html

Should the page1.html also contain all the common CSS and Javascript resources loading in it ? If yes, in scenario1 how to avoid resource requests for common CSS , Javascript to the server ?

ex: https://www.rabbitmq.com/documentation.html

In this the header stays still along with the menu links on the right .. only the text gets changed along with URL.