2026-08-21
每日一文 · 长文精读
Next.js 16.3: Instant Navigations, Up to 90% Less Dev Memory and Faster Builds
Next.js 16.3:即时导航,开发内存减少高达90%,构建速度更快
作者:Daniel Curtis · InfoQ 原文
摘要:Vercel 发布了 Next.js 16.3,这是自去年 11 月 16.0 发布以来最大的更新。新版本通过可选的 Instant Navigations 工具集带来了单页应用般的响应速度,同时保留了服务端模型。Turbopack 通过磁盘缓存和内存驱逐功能,在开发过程中内存使用减少高达 90%。构建速度在 CI 上重复构建可提升 5.5 倍。TypeScript 7 的原生端口使类型检查更快。服务端渲染改用原生 Node.js 流,负载下请求处理能力提升 22%。但部分新功能存在局限,如静态导出不支持 Partial Prefetching,全局 styled-jsx 样式可能泄漏等。
Vercel has released Next.js 16.3, the biggest update to the React framework since 16.0 shipped last November, pairing performance gains that reach every existing app with an opt-in suite of tools called Instant Navigations.
Vercel 发布了 Next.js 16.3,这是自去年 11 月 16.0 发布以来 React 框架的最大更新,它将惠及每个现有应用的性能提升与一套名为 Instant Navigations 的可选工具集相结合。
Much of the release targets the development experience.
此次发布的大部分内容都针对开发体验。
Turbopack now uses up to 90 percent less memory during next dev, thanks to disk caching and a new memory eviction feature that are both on by default.
Turbopack 现在在 next dev 期间使用的内存最多减少 90%,这要归功于默认开启的磁盘缓存和新的内存驱逐功能。
Vercel reports its own dashboard falling from 21.5GB to 2GB, and The Register noted an early adopter whose usage dropped from around 4GB to 1.5GB, describing it as "back to normal again".
Vercel 报告其自己的仪表盘从 21.5GB 降至 2GB,而 The Register 注意到一位早期采用者的使用量从大约 4GB 降至 1.5GB,并将其描述为“恢复正常”。
The same disk cache now accelerates next build, with repeat builds up to 5.5 times faster on CI.
同样的磁盘缓存现在加速了 next build,在 CI 上重复构建速度提升高达 5.5 倍。
Type checking is faster too.
类型检查也更快了。
next build can run TypeScript 7, the native port Microsoft claims is roughly ten times quicker, after bumping the local dependency: pnpm add -D typescript@^7
在升级本地依赖(pnpm add -D typescript@^7)后,next build 可以运行 TypeScript 7,微软声称这个原生端口大约快十倍。
Server-side rendering was rebuilt on native Node.js streams instead of web streams, which Vercel says handles up to 22 percent more requests under load with no code changes.
服务端渲染被重建为基于原生 Node.js 流而非 Web 流,Vercel 表示在负载下无需更改代码即可处理多达 22% 的更多请求。
Heise reported that the edge runtime is now deprecated as part of the same move toward Node.
Heise 报道称,作为向 Node 靠拢的一部分,边缘运行时现已弃用。
The headline addition is Instant Navigations, an opt-in set of tools that brings the responsiveness of client-driven single-page apps to Next.js without giving up its server model.
最引人注目的新增功能是 Instant Navigations,这是一套可选工具,将客户端驱动的单页应用的响应性带入 Next.js,同时不放弃其服务端模型。
It builds on the 'use cache' directive introduced last November and is switched on with two flags: const nextConfig: NextConfig = { cacheComponents: true, partialPrefetching: true };
它建立在去年 11 月引入的 'use cache' 指令之上,并通过两个标志启用:const nextConfig: NextConfig = { cacheComponents: true, partialPrefetching: true };
Partial Prefetching bundles smaller prefetches into one reusable shell per route, which Roboto Studio illustrated as turning twenty sidebar links from twenty requests into a single cached shell.
Partial Prefetching 将较小的预取捆绑到每个路由的一个可复用外壳中,Roboto Studio 将其演示为将二十个侧边栏链接从二十个请求变为一个缓存外壳。
New DevTools called Instant Insights automatically surface any navigation that is not instant, and a Playwright instant() helper lets teams catch regressions before they ship.
名为 Instant Insights 的新 DevTools 会自动显示任何非即时导航,而 Playwright instant() 助手可让团队在发布前捕获回归。
Developers on Reddit have put the 90 percent memory claim to the test, though the new flags carry caveats.
Reddit 上的开发者已经对 90% 的内存声称进行了测试,不过新标志带有一些注意事项。
The GitHub feedback discussion lists a couple of issues: static exports do not work with Partial Prefetching, global styled-jsx styles can leak between routes, and self-hosting on SST with cacheComponents can break server rendering entirely.
GitHub 反馈讨论列出了一些问题:静态导出不适用于 Partial Prefetching,全局 styled-jsx 样式可能在路由之间泄漏,以及在 SST 上使用 cacheComponents 自托管可能会完全破坏服务端渲染。
Appwrite advised upgrading now for the defaults but adopting Instant Navigations one route at a time.
Appwrite 建议现在升级以获取默认功能,但一次只在一个路由上采用 Instant Navigations。
New projects can install with the defaults using npm install next@latest, while existing projects can follow the migrating to Cache Components guide before enabling the new behaviour, which is set to become the default in a future major version.
新项目可以使用 npm install next@latest 安装默认设置,而现有项目可以在启用新行为之前遵循迁移到 Cache Components 的指南,该行为将在未来的主要版本中成为默认设置。
Next.js is answering the long-standing complaint that Server Components felt sluggish next to single-page apps, borrowing their instant loading shells while keeping its server-driven rendering.
Next.js 正在回应长期以来关于 Server Components 与单页应用相比感觉迟缓的抱怨,借用了它们的即时加载外壳,同时保留了其服务端驱动的渲染。
It also leans further into agent-driven development by writing a version-matched AGENTS.md block for coding agents, an area where lighter frameworks such as Astro and TanStack Start have been competing.
它还通过为编码代理编写版本匹配的 AGENTS.md 块进一步倾向于代理驱动开发,这是 Astro 和 TanStack Start 等更轻量级框架一直在竞争的领域。
Next.js is an open-source React framework developed and maintained by Vercel.
Next.js 是一个由 Vercel 开发和维护的开源 React 框架。
It extends React with file-based routing, server-side rendering, and the App Router's Server Components, and is widely used for everything from static sites to large-scale dynamic applications.
它通过基于文件的路由、服务端渲染和 App Router 的 Server Components 扩展了 React,并被广泛用于从静态站点到大规模动态应用程序的各种场景。
阅读理解
1. What is the primary performance improvement claimed for Turbopack in Next.js 16.3?
2. Which of the following is a known caveat of using Partial Prefetching in Next.js 16.3?
3. How does Instant Navigations achieve its responsiveness according to the article?