React Query在Next.js SSR中实现持久化无限加载的最佳实践

问题背景

在使用React Query与Next.js服务端渲染(SSR)结合开发无限加载功能时，开发者经常会遇到一个典型问题：当用户导航到其他页面后返回时，之前加载的分页数据会被重置。这种现象破坏了用户体验，让用户不得不重新加载他们已经浏览过的内容。

技术原理分析

这种现象的根本原因在于Next.js的服务端渲染机制。在SSR模式下，每次页面请求都会创建一个新的QueryClient实例，并通过prefetchQuery方法预取数据。当用户导航离开后返回时，服务端组件会重新执行，导致：

1. 创建新的QueryClient实例
2. 重新执行prefetchInfiniteQuery
3. 只获取初始数量的数据项(如示例中的3条)
4. 客户端接收到新的脱水状态，覆盖了之前的分页状态

解决方案

方案一：配置Next.js缓存策略

Next.js提供了静态页面生成和缓存机制，可以通过配置staleTime来控制数据的有效期。这种方法适合内容更新不频繁的场景：

1. 在next.config.js中设置适当的staleTime
2. 确保页面在构建时预取足够多的数据
3. 利用ISR(增量静态再生)来平衡新鲜度和性能

方案二：服务端预取多页数据

React Query的prefetchInfiniteQuery方法支持pages参数，可以在服务端一次性预取多页数据：

queryClient.prefetchInfiniteQuery({
  queryKey: ["active-moments"],
  queryFn: () => getActiveMoments({ limit: 3 }),
  initialPageParam: "",
  pages: 3 // 预取3页数据
})

这种方法减少了客户端需要追加请求的次数，但会增加服务端的负载。

方案三：结合URL状态管理

最健壮的解决方案是将分页状态保存在URL中：

1. 使用查询参数记录当前页码(如?page=3)
2. 服务端根据URL参数预取对应页面的数据
3. 客户端导航时保持URL状态不变
4. 实现深链接，允许用户分享特定分页状态

实现建议

对于大多数应用，推荐结合方案二和方案三：

1. 在服务端预取2-3页数据作为初始加载
2. 使用URL参数维护分页状态
3. 客户端无限加载时更新URL状态
4. 配置适当的缓存策略减少服务端压力

性能考量

在实现时需要考虑以下性能因素：

1. 服务端预取数据量需要平衡首屏性能和内存使用
2. 对于数据量大的场景，建议实现按需加载而非全量预取
3. 考虑使用React Query的keepPreviousData选项来平滑过渡
4. 对于用户生成内容，需要更频繁的重新验证

总结

在Next.js SSR应用中实现良好的无限加载体验需要理解React Query的缓存机制和Next.js的渲染周期。通过合理配置缓存策略、预取多页数据以及维护URL状态，可以创造出既快速又保持状态的用户体验。开发者应根据具体应用场景选择最适合的组合方案，在性能和数据新鲜度之间找到平衡点。