升级Next.js与Sitecore-JSS后浏览器回退显示异常求助

核心问题分析 #

升级后回退时URL更新但页面内容滞后，大概率是路由切换时未完成的API请求阻塞主线程，或者框架升级后的路由缓存/ hydration 逻辑变化导致前一页内容无法及时渲染，尤其是带搜索组件的页面存在持续的异步请求。

具体排查与修复方案 #

1. 取消搜索组件的未完成API请求 #

搜索组件的异步请求如果在路由切换时未被取消，会占用主线程资源，导致页面渲染延迟。使用AbortController强制终止请求：

import { useEffect } from 'react';

const SearchComponent = ({ query }) => {
  useEffect(() => {
    const abortController = new AbortController();
    const signal = abortController.signal;

    // 传入signal到API请求
    const fetchResults = async () => {
      try {
        const res = await fetch(`/api/search?q=${query}`, { signal });
        const data = await res.json();
        // 处理搜索结果
      } catch (err) {
        if (err.name !== 'AbortError') {
          // 处理其他错误
        }
      }
    };

    fetchResults();

    // 组件卸载/路由切换时取消请求
    return () => abortController.abort();
  }, [query]);

  return <div>{/* 搜索UI */}</div>;
};

2. 调整Next.js路由缓存策略 #

Next.js 15.4.x对App Router的fetch缓存逻辑做了优化，可能导致回退时前一页数据需要重新获取：

• 对页面数据请求显式设置cache: 'force-cache'，确保直接读取缓存：

  async function getPageData() {
    const res = await fetch('/api/sitecore-data', { cache: 'force-cache' });
    return res.json();
  }
  

• 检查页面的revalidate配置，避免不必要的实时数据重新验证，比如将revalidate设置为合理的缓存时长（如revalidate: 60）。

3. 优化Sitecore-JSS的Hydration逻辑 #

Sitecore-JSS 22.8.0可能调整了客户端路由的hydration流程：

• 检查SitecoreLayout组件的配置，确保hydrate选项未被设置为延迟模式：

  <SitecoreLayout
    routeData={routeData}
    hydrate={true} // 显式开启即时hydration
  />
  

• 使用useRouteData钩子时，优先读取本地缓存的路由数据，避免回退时重复请求Sitecore：

  import { useRouteData } from '@sitecore-jss/sitecore-jss-react';
  
  const PageComponent = () => {
    const routeData = useRouteData();
    // 手动缓存路由数据到sessionStorage
    useEffect(() => {
      if (routeData) {
        sessionStorage.setItem(`route-${routeData.routePath}`, JSON.stringify(routeData));
      }
    }, [routeData]);
  
    // 回退时优先读取缓存
    const getCachedRouteData = (path) => {
      return JSON.parse(sessionStorage.getItem(`route-${path}`));
    };
  };
  

4. 排查主线程阻塞 #

通过浏览器DevTools的Performance面板录制回退操作，定位长时间阻塞主线程的任务：

• 过滤出Long Tasks，查看是否有未取消的请求、大量DOM操作或框架内部逻辑占用主线程；
• 如果是Sitecore-JSS的内部渲染逻辑导致，尝试禁用组件的懒加载（如果开启），调整渲染优先级。

临时应急方案 #

如果需要紧急上线，可在搜索页面监听路由切换事件，手动触发前一页的强制渲染：

import { useRouter } from 'next/router';

const SearchPage = () => {
  const router = useRouter();

  useEffect(() => {
    const handleRouteChangeStart = (url) => {
      // 当回退到前一页时，强制刷新页面
      if (url === router.asPath.split('/').slice(0, -1).join('/')) {
        window.location.href = url;
      }
    };

    router.events.on('routeChangeStart', handleRouteChangeStart);
    return () => router.events.off('routeChangeStart', handleRouteChangeStart);
  }, [router]);
};

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