Next.js 16 Cache Components:PPR 退场,新缓存范式

影响力:Next.js 16(2025-10-21 发布,Next.js Conf 2025)是 2025-2026 最大单点版本变化,Turbopack dev + build 双向 stable + 默认,React Compiler stable;Cache Components 替代 PPR / dynamicIO。 干活密度:🟢 干活级(影响每一个 Next.js 项目升级) 必核:cacheComponents flag、updateTag/revalidateTag 新签名、middleware.ts → proxy.ts

🔥 影响力卡片

• Next.js 16 = 2025-10-21(Next.js Conf SF The Midway,Rauch + Selikoff + Lai keynote)
• 16.1(2025-12)stable FS 缓存;16.2(2026-03-18)持续迭代
• Tech Radar Vol 33 同期标 Next.js Pages Router → end-of-life(CI 测试预计 2026 年中后下线)

🎯 为什么必读

如果你维护任何一个 Next.js 项目,Next 16 是必须升级的拐点,且不能机械升级 —— 三个 experimental flag 全删了,缓存模型彻底重写,middleware 文件改名。机械升级会得到一个能跑但缓存语义错乱的项目。

一句话总结

PPR 不再叫 PPR,改叫 Cache Components;"use cache" 替代路由级 experimental_ppr;revalidateTag 强制要 cacheLife。

💎 金句墙

★ “Three flags die together: experimental.ppr, experimental_ppr, experimental.dynamicIO.” “三个 flag 一起死:experimental.ppr、experimental_ppr、experimental.dynamicIO。” —— 译者点评:这是最关键的 breaking。原 PPR / dynamic IO 都是 experimental,Next 16 把它们合并进新 GA 模型 Cache Components,统一开关 cacheComponents: true

★ “Turbopack is now default for both dev and build.” “Turbopack 现已是 dev 和 build 的默认。” —— 译者点评:这是行业大事件。从 Next 13 起 Turbopack 蹒跚 4 年,16 起对 webpack 的最后告别。Vite 8 同期 Rolldown 默认,两条 Rust 化路线正面对撞

📋 核心精读

1. 升级第一步:跑 codemod

npx @next/codemod@canary upgrade latest

🟢 译者点评:Next 团队的 codemod 几次主版本表现都不错。先在分支跑,review diff 后再 merge。

2. 新缓存模型

// next.config.ts
export default {
  cacheComponents: true,    // PPR + 组件级缓存,opt-in
};

// 组件级缓存(替代旧路由级 export const experimental_ppr)
'use cache';
export async function ProductGrid() {
  // 编译器自动生成 cache key
  const data = await fetchProducts();
  return <Grid data={data} />;
}

🟢 译者点评:缓存粒度从路由级降到组件级,这是范式变化。“路由是 PPR” 的二元思维不再适用 —— 任意组件都可以独立 'use cache',编译器按 props 生成 key。

3. revalidateTag 新签名

import { updateTag, revalidateTag } from 'next/cache';

// 立即失效并重读(read-your-writes)
updateTag(`user-${id}`);

// SWR — 新签名强制要 cacheLife
revalidateTag('blog', 'max');   // 'max' / 自定义 cacheLife profile

🟢 译者点评:旧 revalidateTag('blog') 不再合法,必须传 cacheLife 第二参数。这强制开发者显式声明缓存生命周期,避免长期 ad-hoc 的 misuse。

4. middleware.ts → proxy.ts

src/
├── middleware.ts   ❌ Next 15 及以前
├── proxy.ts        ✅ Next 16

🟢 译者点评:next-intl、Better Auth 等库已跟进。命名更准确(它本来就不只 middleware 语义)。但 stack overflow / blog 历史教程要等几个月才会更新。

5. image 默认变化(必须改)

🟢 译者点评:qualities 默认 [75] 很容易翻车。如果你的代码里写了 <Image quality={90} />,生效的会是 75。要么显式 qualities: [75, 90],要么接受默认。

6. Turbopack 默认 + React Compiler stable

// 不再需要 'use memo';React Compiler 自动 memo
function ExpensiveList({ items }) {
  const filtered = items.filter(x => x.active);  // 自动 memoize
  return filtered.map(...)
}

🟢 译者点评:React Compiler stable 后,手写 useMemo / useCallback 反而是反模式。Million.js 的叙事位被它彻底抢走。

🟢 译者总评

1. 必须改 5 处:跑 codemod / cacheComponents: true / 文件名 middleware → proxy / revalidateTag 加第二参数 / images.qualities 显式
2. 不要机械升级:Cache Components 是新模型,先在 staging 验证缓存语义(打开 cacheLife 默认 max,逐步下调)
3. 配套读 Vercel Fluid Compute:Next 16 + Fluid + Active CPU 是同一组合拳,AI/Agent/I/O bound 后端账单常降 80-95%
4. 观察期:16.x 系列还会持续迭代,生产升级建议留 2-3 个月观察

🔗 调研来源

• Next.js 16 release blog
• Next.js 16.2 release
• Next.js Conf 2025 schedule
• Opening Keynote (YouTube)
• Next.js PPR Platform Guide
• Upgrading to Next.js 16
• next/image API reference
• ThoughtWorks Tech Radar Vol 33 PDF