随着前端应用复杂度的提升，无限滚动（Infinite Scroll）已成为数据密集型页面（如社交信息流、电商列表、新闻聚合）的标配交互。然而，当用户从详情页返回列表页时，如何完美恢复滚动位置与加载状态，始终是Next.js开发者面临的核心痛点。近日，Next.js官方团队在技术社区中回应了这一难题，并给出了一套兼具性能与可维护性的推荐架构方案。

问题根源：客户端导航与状态丢失

在Next.js中，无论是使用<Link>组件跳转，还是通过useRouter().push()进行客户端导航，默认行为会销毁当前页面的React组件树，导致所有本地状态（包括滚动位置、已加载数据、加载更多状态）完全重置。纯前端方案如localStorage或sessionStorage虽能存储数据，但无法持久化DOM滚动容器的具体像素位置，且无法应对服务端渲染（SSR）场景下的首屏一致性要求。

社区方案的局限性

目前主流应对手段包括： - URL查询参数：将当前页码、滚动偏移量编码到URL中。适用于分页明确场景，但无限滚动的实际加载段数（如第30屏、第50条数据）难以用URL优雅表达，且URL长度受限。 - Redux/Zustand持久化：将滚动位置与数据快照存入全局Store并持久化到storage。问题在于：SSR时Store为空，需额外做 hydration 判断；数据冗余可能导致性能开销。 - 手动 scrollRestoration：利用浏览器原生history.scrollRestoration = 'manual'配合window.scrollTo。但Next.js的客户端路由是SPA式跳转，原生滚动恢复仅在浏览器刷新时生效，跨页面导航并不支持。

官方推荐：URL持久化 + 滚动容器Ref + 防抖写入

在最新的技术建议中，Next.js团队推荐采用三层架构：

第一层：URL作为唯一的真实状态源（Source of Truth）

使用useSearchParams（App Router）或router.query（Pages Router），将无限滚动的关键信息——已加载数据的最后可见时间戳或最后一条数据的游标（cursor）——编码进URL。例如：

/products?cursor=abc123&scrollY=2450

这样，当用户按“返回”按钮时，Next.js能够根据URL直接恢复关键参数，无需额外请求或计算。

第二层：滚动容器位置通过Ref + 防抖写入sessionStorage

由于URL不宜频繁更新（易触发路由变化），滚动位置的实时恢复采用sessionStorage。在useEffect中监听滚动事件，每200ms将scrollTop值写入sessionStorage；组件卸载时再写入一次。同时，在页面初始化时读取并调用scrollTo：

useEffect(() => {
  const saved = sessionStorage.getItem('scroll:' + pathname);
  if (saved) requestAnimationFrame(() => containerRef.current.scrollTo(0, +saved));
}, []);

这种方式避免了URL参数字段的膨胀，且sessionStorage在标签页关闭后自动清除，不产生遗留数据。

第三层：数据状态与渲染分离——利用Next.js的缓存机制

对于已加载的数据列表，官方推荐使用React Cache（App Router）或SWR/React Query的缓存键绑定到URL参数。当用户返回时，由于URL中包含相同的游标参数，Next.js的客户端缓存会直接将之前的数据返回，无需重新请求。与此同时，loading状态由useSearchParams控制，确保即使数据缓存命中，加载动画也能等待滚动恢复先完成。

实战验证：在App Router下的实现亮点

以App Router为例，实现上述架构仅需一个自定义 Hook useInfiniteScrollRestore：

  • 内部维护containerRef，绑定到实际滚动容器（非window）。
  • 通过usePathname()和useSearchParams()获取当前路由标识，作为sessionStorage的key。
  • 在useEffect中设置scrollRestoration='manual'并拦截popstate事件，以同步恢复。
  • 配合useCallback防抖写入sessionStorage。

社区开发者实测显示，该方案在包含2000条数据的无限滚动列表中，返回时滚动恢复准确率达100%，且无额外网络请求，首屏渲染速度保持与普通页面一致。

专家总结：平衡简化与健壮性

Next.js团队强调，没有“万能银弹”。对于简单场景（如一次性加载少量数据），纯URL参数即可；对于重度无限滚动（如社交媒体时间轴），上述三层架构是目前性能与开发成本平衡的最佳实践。值得注意的是，该方案完全兼容Server Components和流式渲染（Streaming），不会破坏Next.js的RSC优势。

随着Next.js 14及后续版本对useOptimistic和Server Actions的深化，未来不排除官方推出原生<ScrollRestoration>组件。在此之前，这套推荐架构已成为社区共识，被多个千万级用户产品采纳。开发者可访问Next.js官方文档的“Infinite Scroll Best Practices”章节（2025年3月更新版）获取完整代码示例与性能基准测试数据。

延伸阅读：Next.js官方GitHub讨论 #67892：Preserve state across navigation in list pages。