🎉 Vercel 官宣 Next 16.3 正式发布,GitHub 第一全栈框架再次进化!

👇 今日要闻

打破信息壁垒,走近全球前端。Hello 大家好,我是林语冰。

Next 团队官宣,Next 16.3 正式发布!,这也是去年 Next 16 发布以来最大的一个次版本更新。

Next 的母公司 Vercel 也码不停蹄支持集成 Next 16.3,重大改进如下:

  • 更精简的预请求机制,预获取请求减少
  • 即时导航,大规模项目中更快的路由
  • 不可变静态资源,降低静态资源成本开销

本期我们一起来瞄一下 GitHub 第一全栈框架 Next 16.3 新增了哪些功能,为 Vercel 平台带来了哪些技术升级。

👉 即时导航

Next 16.3 的亮点功能是 即时导航(Instant Navigation),Next 团队专门撰写了一篇博客来单独介绍这个新功能。

之前,Next 构建时存在三大痛点:

  • 预请求:过于激进,且成本过高
  • 缓存:隐式的缓存模型不直观,且不适用于动态应用
  • 导航:服务器组件避减少了 JS 请求量,但也降低了导航速度

为此,去年 Next 引入了 'use cache' 指令作为缓存原语,这比服务端缓存 API 更直观 且易于组合。

现在,'use cache' 与服务器组件和 Suspense 继续集成,它首次为 Next 带来了客户端缓存,让你能构建静态、动态或介于两者之间的任意应用。

Next 16.3 支持通过启用两个新配置来进行构建,如下所示:

即时导航带来的主要改进如下:

  • 部分预请求 :以前只支持整页预请求,现在支持通过 <Link prefetch={true}> 进行链接级别的预请求,也能从任意路由 UI 中提取可复用的加载外壳
  • ISR 增量静态再生成:以前构建时预渲染部分页面,要么显示加载提示,要么阻止首次访问;现在两者兼备,首次访问时会显示即时加载,后续访问从缓存中获取最终内容
  • 即时洞察 :早期 RSC 服务器组件响应速度不如 SPA 单页应用,导航速度较慢;现在支持使用 Suspense 定义内联加载状态,或使用 'use cache' 预渲染,使得响应和 SPA 一样纵享丝滑

为了确保你不会遗漏加载缓慢的页面,Next DevTools 开发工具现在提供了 即时洞察(Instant Insights)功能,用于显示你遭遇的任何非即时导航:

👉 import.meta.glob

Turbopack 现在支持 import.meta.glob(),这是一个与 Vite 兼容的 API,基本示例如下:

可以看到,import.meta.glob 的返回值默认是一个惰性导入的对象:

  • 键:相对于调用文件的文件路径
  • 值:一个 thunk,即返回模块对应 Promise 的函数

这支持使用 glob 模式从文件系统一次性导入多个模块,为从本地文件读取数据的服务器组件带来了 HMR 热模块重载等好处。

⚠️ 注意,import.meta.glob 要求使用 Turbopack,不支持和 webpack 共用。

👉 Rust 版 React 编译器

Next 16.3 实验性支持基于 Rust 的 React 编译器,用于在构建时优化你的组件,无需手动记忆化。

现在,你能在配置中启用这个新型的原生编译器,如下所示:

以前在 Node 中启用 React 编译器要求通过 Babel 进行编译,现在 Rust 移植的编译器则在 Turbopack 内部直接运行,这避免了重新解析和生成代码等额外工作。

如果你的项目不需要依赖 Babel,那么新型编译器性能大幅提升。据 Next 团队测试,next dev 页面冷启动耗时缩短了 34%,热启动耗时缩短了 46%。

如果你仍依赖 Babel 进行其他代码转换,那么性能提升幅度略微降低,但使用基于 Rust 的编译器后,性能还是有小幅提升。

👉 Go + TypeScript

上个月,基于 Go 原生移植的 TypeScript 7 稳定版正式首发,提速十倍。

Next 16.3 也开始实验性集成,来享受更快的类型检查。

只需要更新本地项目的开发依赖,就能在 next build 时使用 TypeScript 7 进行类型检查:

默认情况下,next build 会运行本地项目的 tsc 命令,而不是加载 TypeScript JavaScript 编译器 API。

这既支持 TypeScript 6,也支持 TypeScript 7,因为其 JavaScript API 暂不可用,TypeScript 7.1 会进一步支持编译器 API。

👉 性能优化

Next 16.3 也带来了一大波性能优化,主要包括:

  • SSR 渲染更快:应用路由渲染中使用 Node 流替代了 Web 流,消除了服务端渲染的转换开销
  • 构建提速next build 默认启用磁盘缓存,构建提速 5.5 倍
  • 内存优化 :得益于磁盘缓存,Turbopack 在运行 next dev 时内存占用锐减 90%

举个栗子,Next 团队给出的新版内存占用跑分直接降低到短短一根:

👇 重点总结

GitHub 第一全栈框架 Next 正式官宣 Next 16.3,这是去年 Next 16 发布以来 最大的一个次版本更新,重点包括:

  • Rust + React 编译器:基于 Rust 移植的原生 React 编译器,性能对 Babel 降维打击
  • Go + TypeScript 7:基于 Go 移植的原生 TypeScript 7,对旧版编译器降维打击
  • Vite glob + Turbopack :新增 Vite 兼容的 import.meta.glob,一次性批量导入文件

✅ 此外,Next 16.3 次版本的亮点功能是 即时导航 ,强化了 'use cache' 指令这个缓存原语,首次支持客户端缓存,纵享 SPA 单页应用级别的响应速度。

👍 以上就是本期《前端日报》的全部内容了,如果读完对你有所帮助,可以按赞打卡、在看推荐或转发分享。

🙏 已经关注我的粉丝们,我们下期再见啦,掰掰~~

👇 参考文献:

相关推荐
不爱说话郭德纲2 小时前
我只给了 TRAE Work 一张差评截图,它最后却把自己的 P0 结论推翻了?
前端·后端·架构
张元清2 小时前
React useEvent Hook:告别过期闭包的稳定回调 (2026)
javascript·react.js
用户938515635072 小时前
从 DOM 编程到声明式 UI:React useRef 与 useState 底层全解析
前端·javascript·react.js
小月土星2 小时前
19.LeetCode 删除链表的倒数第 N 个节点 超详细题解(JS 版)
javascript
kisshyshy2 小时前
前端路由进化史:从刷新白屏到SPA,手写一个Hash路由就懂了!
前端·javascript·react.js
Sterting3 小时前
第 8 节:表单 — 前端校验的第一道防线
前端·javascript
保加利亚的风3 小时前
Docker 学习文档(Mac + Docker Desktop 版)
前端·后端
java1234_小锋3 小时前
Vue3专题 - 条件渲染
前端·javascript·vue.js