如何防止Handlebars局部模板在每次Express路由跳转时重新加载？

传统Express + Handlebars的服务端渲染模式下，每次路由跳转默认会触发整页刷新：浏览器会销毁当前页面全部DOM，重新解析服务端返回的完整HTML文档。你看到的导航栏局部模板重载、样式短暂错乱，不是Handlebars对partial的加载机制有问题，是整页跳转的默认行为+资源加载顺序不合理导致的。

零架构改动：先消除样式闪烁 #

如果不想改现有跳转逻辑，只要调整配置和资源加载顺序，哪怕导航随页面渲染也不会出现错乱：

• 把导航依赖的所有全局CSS放到Handlebars主布局文件的<head>标签内引入，不要把全局CSS放到页面底部、也不要用JS异步加载导航相关样式。浏览器解析HTML时会优先加载头部CSS，不会出现先渲染无样式导航、等CSS加载完再重排的错乱问题。
  主布局文件示例（一般路径为views/layouts/main.handlebars）：

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的站点</title>
    <!-- 导航、全局布局的CSS全部放头部优先加载 -->
    <link rel="stylesheet" href="/static/css/global.css">
    <link rel="stylesheet" href="/static/css/nav.css">
  </head>
  

• 导航的基础布局样式（比如flex布局、固定定位、颜色尺寸）直接写在CSS里，不要等JS执行完再给导航加布局类。JS只负责处理滚动变色、移动端菜单展开/收起这类交互逻辑，不要干涉导航的基础渲染样式。
• 生产环境开启模板缓存，避免每次请求都重新读取、编译partial文件，缩短HTML返回耗时：

  // Express服务端配置
  app.set('view cache', true); // 开启Express模板缓存
  const hbs = require('hbs');
  app.engine('handlebars', hbs.__express);
  

彻底解决：固定区域不随跳转重载 #

如果要完全避免导航栏DOM被销毁重建，可以在保留现有SSR架构的基础上，改成局部内容刷新，不用重构为React/Vue类的重型SPA：

• 自己实现轻量路由拦截：把导航、页脚这类固定公共区域放在主布局中，给可变的页面内容区加专属容器（比如id为page-content的div）。前端拦截所有站内a标签的点击事件，用fetch拉取目标页面的HTML，解析出内容区的HTML片段替换当前页面的内容容器，同时用History API更新浏览器地址栏，全程不会碰导航栏的DOM。
  前端公共逻辑示例（所有页面都引入这段JS即可）：

  document.addEventListener('click', async (e) => {
    const targetLink = e.target.closest('a');
    // 仅拦截同站内、非新窗口打开的跳转
    if (!targetLink || targetLink.target || targetLink.hostname !== location.hostname) return;
    e.preventDefault();
    const resp = await fetch(targetLink.href);
    const htmlText = await resp.text();
    // 解析返回的新页面内容
    const parser = new DOMParser();
    const newDoc = parser.parseFromString(htmlText, 'text/html');
    // 仅替换内容区，导航DOM完全保留
    document.querySelector('#page-content').innerHTML = newDoc.querySelector('#page-content').innerHTML;
    // 更新地址栏和页面标题
    history.pushState(null, '', targetLink.href);
    document.title = newDoc.title;
  });
  // 处理浏览器前进/后退逻辑
  window.addEventListener('popstate', () => location.reload());
  

• 不想自己写拦截逻辑可以直接用htmx的boost功能，给页面加hx-boost="true"属性，框架会自动处理局部内容替换、边界兼容问题，改动量极小。

注意：不要为了避免导航重载就把导航改成纯JS前端渲染，这种方式会导致首屏加载时导航等待JS执行完才渲染，反而出现更明显的闪烁，还会影响站点SEO。

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