Cache Component

• Cache Components 是Next.js(16)版本特有的机制，缓存组件
• Cache Components 可以实现了静态内容 、动态内容 、缓存内容的混合编排
• Cache Components = 让一个 Next.js 页面同时拥有“静态首屏速度”和“动态内容能力”的机制。

静态内容：在 prerender（通常是构建阶段或可预渲染阶段）就能完成的内容，例如同步 I/O、本地文件读取、模块导入、无网络请求、无用户相关数据、纯计算结果。这类组件的渲染输出会直接进入 static shell，用户首屏可以立即拿到。

• 总结：不依赖请求和运行时数据，这些都可以当作静态内容，在构建的时候，就能确定这些数据内容，这些数据内容就是静态内容

动态内容：必须等到请求才能完成的内容，通常依赖 cookies()、headers()、searchParams 等 runtime data，或者你显式要求它在请求时执行。这类内容必须放在 <Suspense> 中，先输出 fallback，再通过 streaming 补上真实内容。

• 总结：发起请求才渲染内容，每次请求都可能生成不同结果，不会被缓存，这些可当作动态内容

缓存内容：本身依赖异步/外部数据，因此可以通过 use cache 显式缓存；再配合 cacheLife 指定缓存生命周期后，它的结果就能在 prerender 阶段被复用并纳入 static shell。它更准确地说是“可缓存的异步内容”，不等于“所有动态内容的缓存版”

• 注意：这里的“缓存内容”最容易误解。它不是“浏览器缓存”
• 总结：缓存内容的本质就是缓存动态数据（缓存异步内容）

相关专有名称

• prerender：提前渲染
• static shell：
  • 可以理解成“页面的静态外壳”或“首屏骨架成品”
  • 可以比喻为毛坯房，会提前把结构搭建好
  • 官方说法是：Cache Components 会把 route prerender 成一个 static HTML shell，浏览器可以立刻拿到它；后续动态内容准备好后，再更新 UI
• cacheLife
  • cacheLife 是 Next.js 提供的一个函数
  • 用来设置 缓存函数或组件的缓存生命周期
  • 要和 'use cache' 一起用，并且写在这个缓存作用域里面
  • 可以理解为给“可缓存的内容”设置缓存时间

缓存组件使用

• 在next配置中启用cacheComponents
• 缓存内容时间的设置