带滚动位置与状态恢复的无限滚动：返回后数据丢失问题求解

我开发了一个带无限滚动列表的页面，通过Server Action加载10条初始数据，滚动时加载更多；点击列表项跳转到其他路由后，返回时滚动位置恢复，但后续加载的数据全部丢失，仅显示初始10条。以下是几种最优解决方案：

方案1：全局状态管理（如Zustand/Redux Toolkit） #

• 核心思路：将所有已加载的列表数据存入客户端全局状态，同应用内页面跳转时状态不会销毁，返回页面时直接复用数据。
• 实现步骤：
  1. 创建全局状态store，包含列表数据集合、当前分页偏移量等字段。
  2. 初始加载完成后，将Server Action返回的初始数据同步到全局状态。
  3. 触发滚动加载时，请求新数据并追加到全局状态的集合中。
  4. 列表页面渲染时，优先从全局状态读取数据，不存在时再调用Server Action初始化。
• 优缺点：
  • ✅ 状态统一管理，适合复杂应用场景，数据在路由跳转间完全保留。
  • ❌ 需引入状态管理库，小型项目可能过度设计。

方案2：客户端存储（sessionStorage/localStorage） #

• 核心思路：离开列表页面时，将已加载数据存入客户端存储，返回时先读取本地数据，避免重新请求。
• 实现步骤：
  1. 用useEffect监听路由变化，当页面即将卸载/跳转时，将当前列表数据通过JSON.stringify存入sessionStorage（会话级存储，关闭标签页即清除）或localStorage（持久化存储）。
  2. 页面初始化时，先尝试从存储中读取数据，若存在则直接渲染，否则调用Server Action加载初始数据。
  3. 可选：添加数据过期逻辑，比如存储时记录时间戳，超过阈值则重新请求。
• 优缺点：
  • ✅ 无额外依赖，实现简单，会话内返回无需重新加载数据。
  • ❌ 存储容量有限（约5MB），敏感数据不适合存在本地，需处理数据过期问题。

方案3：服务端缓存+客户端状态结合 #

• 核心思路：用Next.js的unstable_cache缓存Server Action的分页请求结果，同时在客户端用状态保存已加载数据，返回时快速恢复。
• 实现步骤：
  1. 为加载数据的Server Action添加unstable_cache包装，配置合理的缓存过期时间。
  2. 客户端组件用状态维护所有已加载数据，滚动加载时调用缓存后的Server Action，追加数据。
  3. 返回页面时，若客户端状态仍存在则直接复用，否则从缓存的Server Action快速获取历史数据。
• 优缺点：
  • ✅ 减少重复请求，数据恢复速度快，结合服务端和客户端优势。
  • ❌ unstable_cache为不稳定API，后续版本可能变更，需关注官方更新。

方案4：路由状态传递 #

• 核心思路：跳转时将已加载数据存入路由状态，返回时从路由状态读取。
• 实现步骤：
  1. 调用useRouter().push跳转时，将当前列表数据作为state参数传入。
  2. 返回列表页面时，通过useRouter().state获取保存的数据，用于渲染。
• 优缺点：
  • ✅ 数据仅在本次路由会话中临时保留，无需持久化存储。
  • ❌ 刷新页面后数据丢失，且路由状态不适合存储大量数据。

最优方案推荐 #

• 小型项目/快速实现：优先选客户端存储（sessionStorage），无依赖易上手。
• 中大型复杂应用：推荐全局状态管理（Zustand），状态管理更规范，便于扩展。
• 对请求性能要求高：可选服务端缓存+客户端状态，注意API稳定性风险。

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