主题
Next.js 原理与运行时
Next.js 16 的 Cache Components 和 use cache 如何工作？
这道题重点考察候选人能否把缓存函数、静态外壳、动态请求和失效策略组合起来，而不是只记一个 directive。
面试官想考什么
use cache缓存的到底是数据、组件还是整个页面？ 考察缓存对象边界。- 动态用户信息能否放进缓存函数？ 考察请求上下文和隐私。
cacheLife与cacheTag分别解决什么问题？ 考察生命周期和主动失效。- 启用 Cache Components 后如何验证收益？ 考察指标和回滚。
一句话回答
text
Cache Components 允许把可缓存的组件或数据与动态部分组合成静态 Shell，use cache 决定缓存边界，cacheLife 控制生命周期，cacheTag 支持按业务标签失效；用户和请求特定数据必须留在动态边界之外。面试回答详解
1. 解决的问题
传统静态/动态二选一容易让页面因为一小块动态内容失去整体缓存收益。Cache Components 的目标是把页面拆成可缓存部分和请求时才计算的部分，再通过 Suspense/流式输出组合。
text
静态 Shell + 缓存组件/数据 + 动态请求内容2. 关键 API 关系
use cache：标记可缓存的函数或组件边界。cacheLife：声明缓存的新鲜度和生命周期策略。cacheTag：为缓存结果绑定业务标签，便于 mutation 后失效。- Suspense：为动态或异步部分提供流式边界和 fallback。
实际项目还要结合部署平台的缓存实现，不应假设所有缓存都在单个进程内。
3. 不能缓存什么
依赖 cookies、headers、当前用户、权限、随机数或实时请求上下文的内容不能不加区分地放进公共缓存。若缓存函数接受用户身份作为 key，也要评估 key 数量、敏感数据生命周期和跨租户风险。
4. 失效设计
写操作成功后按资源标签失效，并同步更新客户端 Router Cache 或触发重新导航。标签要与领域资源绑定，例如 product:42，不能只做全站清空。失效是传播过程，CDN、Next 缓存和浏览器缓存可能有不同延迟。
5. 验证和风险
测量命中率、TTFB、首个可见内容、动态片段延迟、缓存体积和错误率。灰度启用，准备按路由或标签关闭缓存。最危险的错误是把个性化数据缓存成公共响应。
可直接背诵的 30 秒回答
text
Cache Components 的核心是把页面拆成可缓存和请求时动态计算的部分。use cache 标记缓存边界，cacheLife 控制生命周期，cacheTag 支持按资源失效，Suspense 负责动态片段的流式展示。用户身份、权限和 cookies 相关数据不能随意进入公共缓存，必须通过缓存 key、权限和线上命中率验证。扩展知识
缓存决策四问
text
缓存对象是什么？ -> key 是否包含必要上下文？
多久失效？ -> 谁触发失效？ -> 哪些客户端仍可能持有旧数据？面试官追问链
追问一：use cache 和 React cache 是一回事吗？
- 考察点：命名相似概念。
- 回答方向：不是。React cache 主要是请求/渲染期间的函数记忆，Next.js
use cache属于框架缓存模型，生命周期和持久性不同。
追问二：为什么 tag 失效后用户还看到旧页面？
- 考察点：多层缓存。
- 回答方向：可能是 Router Cache、CDN、浏览器或不同部署节点仍有旧内容，需要明确失效传播和重新验证路径。
追问三：动态组件还能和静态 Shell 一起返回吗？
- 考察点：流式渲染。
- 回答方向：可以通过 Suspense/流式边界先返回可缓存外壳，再补动态内容，但要设计 loading、错误和 SEO 语义。