返回首页

Next.js 16：更稳、更快、更灵活

•前端开发
Next.jsReactWeb

Next.js 的持续进化

Vercel 最近发布了 Next.js 16 的 RC 版本。这次更新紧随 React 19 的步伐，旨在为开发者提供更稳定、更灵活的开发体验。其中最引人注目的变化莫过于缓存策略的调整和对 React Compiler 的支持。

缓存策略的重大调整：默认不缓存

在 Next.js 14 中，App Router 的激进缓存策略（默认缓存所有 fetch 请求）虽然提升了性能，但也给很多开发者带来了困扰。很多时候，我们发现数据更新了，但页面显示的还是旧内容，不得不手动添加 no-store。

在 Next.js 16 中，团队听取了社区的反馈，将 fetch 请求的默认行为更改为 no-store (不缓存)。

这意味着：

  • 默认情况下，数据总是新鲜的。
  • 如果你需要缓存，需要显式添加 cache: 'force-cache'。

这是一个非常务实的改变，符合大多数动态应用的直觉。开发者现在是“选择性优化”，而不是“选择性逃避坑”。

支持 React 19 与 React Compiler

Next.js 16 全面支持 React 19 RC。这意味着你可以在 Next.js 项目中直接使用 React Compiler。

在 next.config.js 中开启编译器非常简单：

const nextConfig = {
  experimental: {
    reactCompiler: true,
  },
};

这将自动为你的组件启用细粒度的记忆化优化，提升应用性能。

Partial Prerendering (PPR) 的进一步完善

Partial Prerendering 是 Next.js 的一项杀手级特性。它允许你在同一个页面中混合使用静态渲染（Shell）和动态渲染（Content）。

例如，一个电商商品页，导航栏和页脚是静态的，而商品价格和库存是动态的。通过 PPR，服务器可以立即发送静态的 Shell，然后流式传输动态内容。这结合了 SSG 的首屏速度和 SSR 的动态能力。

在 Next.js 16 中，PPR 变得更加成熟，支持更多的增量采用策略。

其它改进

  • 更快的构建速度：TurboPack 的稳定性进一步提升，开发服务器启动速度极快。
  • 优化的错误提示：Hydration Error 的提示信息经过了重新设计，现在能更准确地指出代码中导致不匹配的部分，并给出修复建议。

结语

Next.js 16 并没有堆砌太多新功能，而是专注于解决痛点。缓存策略的调整表明团队真正重视开发者的反馈。随着 React 19 的到来，Next.js 16 势必将成为构建现代 Web 应用的最佳选择之一。如果你的项目正准备升级，现在是时候开始调研了。