SuperAPI AI 工具集

nextjs-caching

前端与建站

查看项目

更新于 10-15 22:13

技能介绍

用途:指导在 Next.js 项目中配置缓存架构、数据失效与缓存组件 API,覆盖 HTTP 读取、自定义函数/组件缓存、单次渲染去重以及变更后的失效处理。

主要能力:

  • HTTP 读取:优先使用 fetch 缓存控制(force-cache、no-store、next.revalidate、tags);每天更新数次的內容常用 ISR 配合 revalidate。
  • 自定义函数/组件缓存:项目启用 cache components 时,优先使用 use cache 配合 cacheLife() 与 cacheTag()。
  • 单次渲染去重:用 React cache() 处理同一渲染过程中重复的服务端读取。
  • 变更失效:按数据归属使用 revalidateTag(),按路由刷新使用 revalidatePath(),变更后客户端视图刷新用 router.refresh()。

使用方式(资料给出的配方流程):

  1. 先对读取分类:静态、周期性新鲜、请求特定或用户特定。
  2. 选最窄的缓存:请求级 memoization 先于持久缓存,标签失效先于路径级失效。
  3. 为一起变更的数据打标签:按数据归属而非习惯上的页面名对齐。
  4. 个人数据保持私有:请求特定状态不要做宽泛路由缓存。
  5. 测试陈旧路径:变更 -> 失效 -> 刷新后的 UI。

验证清单:缓存选择匹配数据归属与新鲜度需求;变更会失效对应的标签或路径;用户特定数据不泄漏进共享缓存;慢读取用 Suspense 流式渲染而非阻塞整条路由;若已启用 cache components,使用 unstable_cache 的既有代码应有迁移说明。

缓存分层与对应控制:Request Memoization(服务端渲染,React cache());Data Cache(服务端,fetch、use cache、tags);Full Route Cache(服务端,静态渲染/重新验证);Router Cache(客户端,router.refresh())。

反模式:个人数据不做共享缓存,请求特定状态需私有策略或 no-store;不要习惯性做路径级失效,数据归属更窄时优先用标签;变更后必须重新验证,否则是正确性缺陷;不要凭传说配置缓存,应按项目已启用特性查阅官方缓存文档。

限制:以上能力、用法与清单均来自给定资料;官方文本为空,具体版本、收费、平台等信息暂未提供。