SuperAPI AI 工具集

nextjs-caching

前端与建站

查看项目

更新于 10-15 23:41

技能介绍

用途:帮助理解与配置 Next.js 的缓存和再验证行为,包括四层缓存机制、fetch 缓存策略、增量静态再生(ISR)、按需再验证以及缓存问题排查。

主要能力:

  1. 四层缓存:请求记忆化(服务端,单次请求内去重相同 fetch)、数据缓存(服务端,持久存储 fetch 结果)、完整路由缓存(服务端,持久保存预渲染 HTML/RSC)、路由缓存(客户端,会话级导航缓存)。
  2. Next.js 16 的 'use cache' 指令:'use cache' 为默认缓存,'use cache: remote' 用于 CDN/边缘缓存,'use cache: private' 用于按用户缓存;配合 cacheLife('hours') 设置生命周期、cacheTag('posts') 启用定向再验证。
  3. fetch 选项:默认 fetch(url) 无限期缓存;{ cache: 'no-store' } 始终获取最新;{ next: { revalidate: 60 } } 60 秒后过期;{ next: { tags: ['posts'] } } 打标签以便失效。
  4. 再验证:revalidatePath('/posts') 按路径、revalidateTag('posts') 按标签、router.refresh() 在客户端刷新当前路由。
  5. 非 fetch 缓存:使用 unstable_cache 缓存数据库查询,可指定 revalidate 与 tags。
  6. 路由段配置:export const dynamic = 'force-dynamic'、export const revalidate = 60、export const fetchCache = 'force-no-store'、export const dynamic = 'force-static'。
  7. 完整路由缓存:静态路由构建时缓存,动态路由配合 generateStaticParams 预渲染,dynamicParams 控制未预渲染路径的行为。
  8. 客户端路由缓存:Link 默认悬停预取,prefetch={false} 关闭;router.refresh() 使当前路由缓存失效。
  9. 缓存调试:在 next.config.js 中开启 logging.fetches.fullUrl,开发环境终端可查看 HIT/MISS/STALE 状态。

使用方式:在 Next.js 项目中按需在 fetch 调用、路由段或 Server Action 中应用上述配置;按需再验证通常放在 Server Action 或带密钥校验的 API 路由中。

适用场景:内容站点 ISR、静态共享内容、用户专属数据缓存、变更后定向失效、缓存行为调试。

限制:资料未提供具体版本兼容范围、性能数据或收费信息;部分 API(如 unstable_cache)名称本身提示可能不稳定,实际使用需以官方文档为准。