If we use static site generators (SSG) and edit some block duplicated on many pages e.g. header or footer, we need to regenerate all the HTML pages using this block. Regardless of the speed of our SSG, the process takes a time. And the more pages we have, the more time we need to wait.
But what if we store the code of duplicated block e.g. header or footer only in one place and load their HTML codes to the pages on the fly by JavaScript?
I mean if the source code of HTML page just has unchanged <head> with link(s) to CSS and <body> with unique main content for the page like
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Page Title</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<header></header>
<script>
var headerReq = new XMLHttpRequest();
headerReq.open('GET', 'header.html', false);
headerReq.send();
document.getElementsByTagName('header')[0].innerHTML = headerReq.responseText;
</script>
<article>
<h1>Page Heading</h1>
<p>
Main content
</p>
</article>
<footer></footer>
<script>
var footerReq = new XMLHttpRequest();
footerReq.open('GET', 'footer.html', false);
footerReq.send();
document.getElementsByTagName('footer')[0].innerHTML = footerReq.responseText;
</script>
</body>
</html>
And we load header and footer (as well as other blocks duplicated on many pages) to the DOM by our JS as codes before and after the main content.
If we change the main content, we may only regenerate the single post page with the content and the category page containing the intro text of the post i.e. regenerate just two HTML pages.
And if we change header or footer, there is no need to regenerate HTML pages at all. We just change such block in one place and JS refreshes it on all the pages when we open any of them.
But will there be the issue of mismatching the source code (we see after right-click and "View page source") and the final DOM code (we see after right-click and "Inspect Element")? The issue described by the link https://www.polemicdigital.com/view-source-quickly-compare-raw-html-rendered-dom
To avoid the issue in our JS we can check user agent and load the header and the footer only for users and not for the bots.
What are the downside(s) of the approach?
ps. I know, in such case if we inline critical CSS and later want to change it, we still need to regenerate all the pages with such critical CSS. And with HTTP/2 there is probably no need in critical CSS at all.
UPDATED
The main question is: to load duplicated parts for both users and search bots OR only for users?
If we load for both, there are at least two issues: 1) the SEO issue of mismatching the source code and the final DOM code and 2) the SEO issue of a delay as search bots need more time to render and index a page with code loaded by JS than a page with only normal source code.
If we load duplicated parts only for users and NOT for the bots, there may be the issue of cloaking or/and hidden texts. *However, I can't understand why as the bots don't see the duplicated parts and can't compare the code they get with the code users get.
