基于SSR数据获取优化Next.js无限滚动缓存策略

核心缓存策略：分层渐进式缓存 #

结合服务端缓存（Redis/Next.js内置缓存） + 客户端内存/本地缓存，针对滚动加载的分页数据做精细化缓存，既减少服务端负载，又保证前端流畅性。

1. 服务端：键值对结构化缓存分页数据 #

• 用page-{页码}-limit-{每页数量}作为缓存键，比如page-2-limit-10，对应存储该页的完整数据
• 后端接口接收到请求时，优先检查缓存：存在则直接返回缓存数据；不存在则查询数据库，写入缓存后再返回
• 设置差异化缓存过期时间：热门数据设1小时，冷门数据设15分钟，避免缓存资源浪费
• 配合Next.js的缓存配置：在getServerSideProps或App Router的fetch中添加next: { revalidate: 3600 }，实现服务端自动缓存管理

2. 客户端：滚动加载时的缓存同步与复用 #

• 前端维护全局缓存对象（可通过React Context或Zustand实现），存储已加载的所有分页数据
• 滚动触发加载新页时，先检查本地缓存：有对应页码数据直接渲染，无数据再发起请求
• 请求成功后将新页数据写入本地缓存，也可借助SWR或React Query自动处理缓存更新、过期和重新验证，省去手动维护成本
• 可选：用localStorage持久化非敏感数据，用户刷新页面后可直接加载已浏览过的分页，无需重复请求服务端

3. 避免重复请求与性能损耗的细节处理 #

• 滚动加载添加防抖处理，比如用lodash.debounce设置300ms延迟，避免短时间内多次触发请求
• 维护loading状态，同一页码的请求仅发起一次，防止快速滚动导致的重复请求
• 服务端做缓存预热：在应用启动或低峰期提前将前5页热门数据加载到缓存，降低首次请求等待时间

优化建议 #

• 增量缓存更新：后端数据更新时，仅删除对应页码的缓存键，下次请求自动重新生成该页缓存，无需清空整个缓存池
• 滚动位置记忆：用户返回页面时，根据滚动位置计算需加载的页码，优先从缓存读取，再补充缺失页码数据
• 监控缓存命中率：通过日志统计命中情况，调整缓存过期时间和预热策略，比如命中率低于70%时延长热门数据缓存时间
• 混合ISR+SSR：数据更新频率低时，预先生成前N页静态页面，后续分页用SSR+缓存，进一步降低服务端负载

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