As we know, static html pages are best because of their high speed, security and low cost of maintenance. If we have already have a website with thousands of statically generated pages and edit for example a post, we may use dependency tracking to re-generate just the pages which were touched. For example the single post page and the blog page.
But if we change website header html (or footer), we need to re-generate all the thousands pages because all they have the same header. I know that static generators are fast, but still the process takes a time. So what about the following idea.
We generate static pages only with main content and add the parts which are duplicated on all pages (i.e. header, footer, aside etc) by client JS when someone visits a page?
For example, the initial html (source code) of static page is:
<!document html> <html> <head> <link href="style.css"> </head> <body> <div class="content"> <h1>Post heading</h1> <p> The first paragraph text </p> <p> The second paragraph text </p> </div> <script src="add_elements.js"></script> </body> </html>
So now if we make a change to the header, we rewrite only one template file containing the header html.
Why not just AJAX website?
The final DOM html code of any page is a mix of source code (we can see by right-clicking the browser's view source code option) and html added dynamically by client JS. AFAIK, the second part may not be always or successfully indexed by search engines. AJAX website is a single page that may have static header and footer as the source code, but the content is added dynamically by JS, so the content is in the risk area. In the case of my idea instead, the situation is opposite: the content is in the source code and other (less important for SEO) parts of page are dynamically added.
Modern search engines compare the source code of a page with its final DOM. Does it matter in my case? I mean if the header and footer are no in the source code, but they are in teh final DOM code, is there a SEO risk?
ps. I heard that search engines may have a problem if website menu links added dynamically by JS but what if we just put them a sitemap?