Next.js 团队在 16.x 系列版本中引入了一种全新的编程模型——Cache Components（缓存组件），旨在解决 App Router 使用过程中的诸多痛点，包括实现个性化页面的快速初始加载、提供服务端渲染应用的即时客户端导航体验，以及使缓存机制变为可选、声明式且可组合。
此前，由于该模型在某些场景下无法提供与旧模型相同的成本和性能保证，官方并未全面推荐通用。但随着关键功能的补齐，自 Next.js 16.4 起，官方强烈推荐将 Cache Components 作为所有 Next.js 应用的最佳实践，并将在 Next.js 17 中设为默认选项。
即日起，通过 create-next-app 创建的新应用将默认启用 Cache Components。针对现有应用，官方推出了更智能的迁移工具，包括新增的 next upgrade --agent 命令及专用 Skills，协助开发者完成代码重构。
此外，Next.js 16.4 还带来了多项开箱即用的改进：降低开发环境下的内存占用和磁盘体积、缩短编译时间、减小生产环境构建包体积，并正式支持 React 19.3。
什么是 Cache Components？
Cache Components 允许开发者将组件树中的特定部分标记为可缓存。其核心注解 'use cache' 可被视为组件级别的 Cache-Control HTTP 头。Next.js 会在渲染页面时解析这些注解，并在浏览器（客户端导航期间）及服务器（服务端渲染或预渲染阶段）缓存组件 UI。
这种可组合的注解机制取代了早期 App Router 版本中的隐式缓存行为，允许在单个页面中混合使用客户端缓存、可扩展的服务端缓存以及请求时渲染。
新增 ensureStatic：确保路由静态化
'use cache' 的一大优势是能在单个 HTTP 响应中流式传输静态与动态内容的组合。例如，将静态预渲染的博客文章与动态渲染的用户头像结合。然而，对于电商、营销页等对成本敏感的场景，意外的动态组件可能增加服务器开销。
Next.js 16.4 新增 ensureStatic 配置，用于强制路由的外壳、预取或完整导航保持静态，防止动态组件意外混入。若页面包含动态内容，Next.js 将根据设置导致构建失败或调整行为：
- navigation：最严格模式，确保对该路由的导航永不触发请求时渲染。
- prefetch：确保仅获取指向该路由的显式预取链接的静态内容。
- shell：确保路由首次被发现时仅获取静态内容。
开发者可将 ensureStatic 应用于单个页面或布局（Layout）。若在根布局设置为 'navigation'，可确保全站页面导航均为静态；若个别页面需动态内容，可通过嵌套布局向下传递配置。
新增 navigation API：从预取中排除内容
预取（Prefetching）能显著提升用户体验，通过 <Link prefetch> 或 useRouter().prefetch() 可在导航前预渲染页面 UI，消除加载状态。但在邮件应用等场景中，预取所有可见链接的全部内容可能导致高昂的成本或服务器压力。
Next.js 16.4 引入新的 navigation API，允许在预取期间排除特定缓存内容的加载，将其推迟至实际导航发生时。例如，在收件箱列表中，可仅预取邮件列表概要，而将邮件线程的具体内容提取到新组件并添加 await navigation()。这样既消除了列表页的加载状态，又避免了提前加载用户可能不会打开的完整邮件线程，实现了体验与成本的平衡。