Next.js 16 缓存示例(Cache Components)
全部示例基于 cacheComponents: true。每个页面展示可验证的缓存行为 (执行计数/时间戳对比),供可行性评估。
★ povison 商详页复刻(真实数据 · 真实 URL 结构)
36 SKU 餐椅:页面/数据分层缓存 + variant 深链 + webhook purge 实验
/mid-century-ash-dining-chair-set-of-2-breathable-burlap-seat-full-assembly.html
数据级缓存
function 级 use cache + cacheLife + cacheTag
/cache/data-level
UI 级缓存
component 级 use cache,缓存整个渲染输出
/cache/ui-level
页面级缓存
file 级 use cache:整页输出为单条目 + layout/page 嵌套独立条目
/cache/page-level
cacheLife 档案对比
seconds/minutes/hours/days/自定义/内联 六种档案
/cache/profiles
按需失效
cacheTag + updateTag(读己之写)/ revalidateTag(SWR)
/cache/on-demand
use cache: private
缓存作用域内读 cookies,结果仅存浏览器
/cache/private
流式渲染对照
Suspense + connection(),非确定值的正确处理
/cache/streaming
运行时参数传入缓存函数
cookies 值提取后作参数,自动参与缓存键
/cache/runtime-args
searchParams 与缓存
query 参数不进页面磁盘缓存:静态壳共用,数据层按 q 分条目
/cache/search-params?q=shoes
Webhook 按需失效
CMS 变更时调用:GET /api/revalidate?tag=feed&secret=$REVALIDATE_SECRET
需在环境变量设置 REVALIDATE_SECRET。Route Handler 中只能用 revalidateTag (第二参数 profile 必填,推荐 "max"),updateTag 仅限 Server Action。
评估要点(全局):
- 缓存键 = build ID + 函数位置哈希 + 可序列化参数 + HMR hash(dev)。 部署后缓存不跨版本延续
- 默认存储是进程内存 LRU;serverless 下不跨请求 —— 跨实例共享需要
use cache: remote+ cacheHandlers NEXT_PRIVATE_DEBUG_CACHE=1可开启详细缓存日志验证行为