Next.js应用跨导航保留无限滚动状态及浏览上下文的推荐架构

核心架构模式：分层状态管理 + 缓存策略 #

1. 已加载商品数据的复用与持久化 #

• 内存级缓存：应用运行期间，用全局状态容器按滚动批次（或分页标识）存储已加载的商品数据。用户从详情页返回时，直接读取内存缓存渲染，完全避免重复请求。
• 持久化缓存：如果需要支持跨应用重启的上下文恢复，将已加载数据（清理敏感字段后）序列化存储到本地存储（数据量小用LocalStorage，大数据量选IndexedDB）。恢复时先读本地缓存，再按需补充最新数据。
• 缓存版本标记：给每个数据批次加时间戳或服务端返回的版本号，用来标记数据有效性，后续判断是否需要更新。

2. 滚动位置的精准恢复 #

• 实时记录滚动状态：用户滚动列表时，实时记录容器的滚动偏移量，同时绑定当前列表的唯一标识（比如分类ID、搜索关键词），避免不同列表场景下的位置混乱。
• 延迟恢复位置：列表组件挂载后，先渲染完已缓存的商品数据，再异步恢复滚动位置——避免因数据未渲染导致的位置偏移问题。

3. 数据新鲜度保障 #

• 增量更新优先：用户返回列表页时，不直接全量拉取数据，而是请求服务端的数据版本号或增量变更信息（比如最近更新的商品、库存变化）。对比本地缓存的版本，只更新有变化的商品项，或者追加新批次的商品。
• 后台静默更新：用户停留在详情页期间，应用后台可以静默请求列表的最新状态，更新缓存中的数据版本。用户返回时，直接展示已更新的内容，无需等待。
• 手动刷新兜底：提供下拉刷新等手动触发入口，允许用户主动获取全量最新数据，同时重置缓存和滚动位置。

典型执行流程 #

• 用户滚动列表：加载新批次数据存入内存缓存，实时记录滚动位置。
• 用户进入详情页：将当前列表的缓存数据、滚动位置、数据版本号存入持久化存储（按需选择，比如仅在应用退到后台时执行）。
• 用户返回列表页：
  1. 读取内存缓存渲染已加载的商品；
  2. 恢复之前记录的滚动位置；
  3. 后台异步请求最新数据版本，对比后增量更新缓存中的内容。

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