AI 摘要：文章深入探讨了 Next.js 的新特性——缓存组件（Cache Components）。传统 Next.js 路由通常被视为整体的静态或动态，而缓存组件打破了这一限制，允许开发者在组件粒度决定哪些部分可以被缓存复用。通过结合局部预渲染（Partial Pre-rendering, PPR）和 Suspense，缓存组件能够让页面立即渲染静态外壳（Static Shell），并渐进式地流式传输动态内容，从而将首屏白屏时间从数秒降低至毫秒级，极大地提升了用户体验和服务器效率。

1. 局部预渲染 (Partial Pre-rendering, PPR) 的演进
• 现代网页通常由可预测的布局数据、偶尔变化的各种内容以及必须实时计算的个性化数据组成。
• PPR 允许页面分阶段渲染：首先发送静态外壳（Static Shell）以建立结构，而动态部分则包裹在 Suspense 边界（Suspense boundaries）中独立处理。
• 虽然 PPR 改善了交付方式，但它默认在每次请求时重新运行动态部分，无法直接复用渲染结果。

2. 缓存组件 (Cache Components) 核心概念
• 缓存组件将缓存决策从路由级别移至组件级别（Component level），解决了 PPR 的复用局限。
• 开发者可以使用 'use cache' 指令标记特定的 UI 部分，使其在多次请求之间复用渲染输出。
• 在多次请求中，被标记为缓存（C）的组件直接读取存储结果，而动态（D）组件则继续按需在服务器上运行。

3. 配置与代码实践
• 在 next.config.ts 中开启实验性功能标志 useCache: true 以启用组件级缓存。
• 通过自定义缓存配置文件（Cache Profiles）来管理数据的保鲜度（Stale）、重新验证（Revalidate）和过期（Expire）时间。
• 使用 cacheLife() 函数在组件内定义具体的缓存策略，并通过 Suspense 配合加载占位图（Loading Skeleton）来隔离慢速数据源。

4. 性能对比与最佳实践
• 性能对比显示：使用缓存组件后，首屏内容呈现时间（Time to First Content）从约 7 秒骤降至 100 毫秒以内。
• 渲染模型从“全或无”（All-or-nothing）转变为“渐进式渲染”（Progressive rendering）。
• 最佳实践建议：不要在缓存组件中混用运行时 API（Runtime APIs）、保持清晰的 Suspense 层次结构、仅缓存确定性的 UI 部分（如导航、产品列表）。

LogRocket Blog

Cache components in Next.js: Faster pages with partial pre-rendering - LogRocket Blog

Speed up Next.js apps by caching predictable components and streaming dynamic data with partial pre-rendering and Suspense.