👇 今日要闻
打破信息壁垒,走近全球前端。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 单页应用级别的响应速度。
👍 以上就是本期《前端日报》的全部内容了,如果读完对你有所帮助,可以按赞打卡、在看推荐或转发分享。
🙏 已经关注我的粉丝们,我们下期再见啦,掰掰~~

👇 参考文献:
- 🔗 Vercel 官方博客 :vercel.com/blog/vercel...
- 🔗 Next 官方博客 :nextjs.org/blog/next-1...