如何在保留布局、菜单和页脚的前提下切换网页主内容？

我的主网页（index.html）采用如下简化结构：

<html>
  <head>
    <title>...</title>
    <meta name=description content="...">
    <link rel=stylesheet href="main.css"/>
        [... including @font-face loads ]
  </head>
  <body>
    <div id=menu>...</div>

    <div id=mainContent>
      ...
    </div>

    <div id=footer>...</div>
    <script src="jquery.min.js"></script>
    ... more scripts
  </body>
</html>

服务器已配置妥当，所有静态文件均会被缓存，刷新页面时客户端不会重新加载。

我希望用户点击站点菜单或页脚中的链接时，仅更新id="mainContent"的div内容，同时保持页面布局、CSS、字体、脚本、菜单和页脚完全不变。目前我梳理了几种实现方式：

已梳理的实现方案 #

1. 多页面复制/服务器端嵌入 #

• 实现方式：复制index.html创建子页面，重写mainContent区域内容并修改title、description等页面专属信息；或通过PHP等后端语言将目标内容嵌入mainContent，同时修改title等专属属性，链接直接指向子页面URL。
• 缺点：
  • 维护成本高：修改外层框架内容时，需同步编辑所有子页面
  • 页面间数据传递不便，仅能通过Cookie（并非始终允许）或URL参数实现

2. JavaScript动态加载内容 #

• 实现方式：给链接绑定onClick事件监听器，通过XHR（或Fetch API）从服务器加载目标内容，替换mainContent的innerHTML
• 优点：
  • 保留页面的JavaScript变量状态
  • 无需重新加载整个页面，用户体验最佳
• 缺点：
  • 无脚本环境下完全无法使用
  • 动态加载的内容可能难以被Google等搜索引擎抓取（疑问：若将备选内容保存为根目录下独立的.html文件，是否能改善这一情况？）

3. 预加载多区块切换 #

• 实现方式：新增一个样式为display: none的mainContent2容器，通过JavaScript点击事件切换两个容器的display样式（none ↔ block）
• 优点：
  • 实现简单
  • 所有内容一次性加载完成，利于SEO收录
• 缺点：
  • 所有内容需一次性加载，导致index.html体积过大

4. iframe方案（已排除） #

因iframe的src属性为静态，大概率不可行。

我倾向选择方案2，想请教以下问题：

• 是否有其他推荐的技术方案？
• 业内的最佳实践是什么？
• 专业人士通常如何实现这类需求？
  恳请给出详细建议。

内容的提问来源于stack exchange，提问作者jamacoe