Next JS 13.4.9滚动恢复功能失效，寻求技术解决方案

• 检查页面组件的渲染缓存
  App Router中，若首页组件因使用useSearchParams等动态函数、或显式设置revalidate导致动态渲染，返回时会触发组件重渲染，进而丢失滚动状态。确保首页组件保留默认的force-cache缓存策略，或用React.memo包裹组件以避免不必要的重渲染。

• 验证路由跳转逻辑
  确认从首页到详情页的跳转使用<Link>组件或router.push()，避免使用原生window.location.href——后者会破坏Next.js的路由状态管理机制。同时排查所有路由跳转代码，确保未隐式传入scroll: false参数（部分第三方组件可能会覆盖该配置）。

• 排查动态内容加载对页面高度的影响
  首页的图片、视频等动态内容异步加载会导致页面高度突变，即便Next.js恢复了滚动位置，内容加载后的高度变化也会让页面“跳回”顶部。可尝试以下方案：

  • 给媒体元素设置固定宽高占位，避免加载时页面重排；
  • 用Intersection Observer延迟加载非视口内的内容，减少返回时的页面高度变化；
  • 在内容全部加载完成后，通过useEffect调整滚动位置。

• 检查自定义路由或中间件的干扰
  若项目中使用了middleware.ts，排查是否存在修改Cache-Control响应头、重定向等逻辑，这些操作可能导致页面重新获取，破坏滚动状态。同时确认next.config.js中未禁用滚动恢复相关的实验性配置（App Router默认开启，无需额外配置，但需排除手动禁用的情况）。

• 简化场景定位问题
  先将首页的动态内容替换为静态文本，测试返回时的滚动恢复是否正常：

  • 若静态内容正常，问题根源在动态内容的加载逻辑；
  • 若静态内容仍失效，检查首页组件是否存在useEffect中强制滚动到顶部的代码（如window.scrollTo(0, 0)），或路由状态异常。

• 手动实现滚动恢复（兜底方案）
  若自动恢复始终无效，可通过sessionStorage手动存储和恢复滚动位置：

  import { useEffect } from 'react';
  
  export default function Home() {
    useEffect(() => {
      // 挂载时恢复滚动位置
      const savedPos = sessionStorage.getItem('homeScroll');
      if (savedPos) {
        window.scrollTo(0, Number(savedPos));
        sessionStorage.removeItem('homeScroll');
      }
  
      // 卸载时保存滚动位置
      const saveScroll = () => {
        sessionStorage.setItem('homeScroll', window.scrollY.toString());
      };
      window.addEventListener('beforeunload', saveScroll);
  
      return () => window.removeEventListener('beforeunload', saveScroll);
    }, []);
  
    // 页面内容
    return <div>{/* 动态流内容 */}</div>;
  }
  

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