← 文章 / 编程开发
InfoQ 5小时前 · 2026-09-03 00:44:01 · 4 阅读

Nuxt 4.5:实验性 SSR 流式传输、Vite 8 以及基于 Rsbuild 的 Rspack 构建器

基于 Vue 的全栈 Web 框架 Nuxt 发布了 Nuxt 4.5,这是他们“近期最大的一次发布”,其中包含构建层的升级、新的运行时,以及为即将推出的 Nuxt 5 所做的大量基础性工作。

Nuxt 4.5 迁移到了 Vite 8,包含基于 Rsbuild 重构的 Rspack 2 构建器、实验性 SSR 流式传输、稳定的错误代码系统以及新的 useLayout 可组合函数。

实验性 SSR 流式传输是其核心特性。它通过立即刷新 HTML 外壳,然后在 Vue 渲染时流式传输主体内容,缩短了“首字节时间”(Time to First Byte)。只需要设置一个配置标志即可启用该功能:

export default defineNuxtConfig({ experimental: { ssrStreaming: true, },})
复制代码

对于机器人和爬虫,流式传输会自动禁用,因此搜索引擎仍然能够收到完全渲染的 HTML;而使用redirect、 cache、 isr或 swr 规则的路由则将回退到缓冲渲染器。

daily.dev 上,一位开发者警告说:

实验性 SSR 流式传输注意事项是我会首先测试的部分:一旦 shell 刷新,后期对状态、头信息或 Cookie 的修改就会无法传达到客户端,因此中间件的逻辑假设就变成了正确性问题,而不仅仅是性能问题。

作者在 dev.to 上指出,如果不使用流式传输,服务器渲染页面需要 2.5 秒,而一位读者对此进行了澄清:

流式传输并不会缩短这 2.5 秒的服务器处理时间,它只是改变了处理工作仍在进行时浏览器

能够渲染的内容。

除了流式传输外,本次发布还推出了一套基于 nostics 的稳定的错误代码系统,警告信息现在会附带可被 grep 检索的代码(例如 NUXT_E1001),并附有简短的成因说明以及具体的修复方案。新的 useLayout 可组合函数会返回当前路由布局解析结果的只读计算引用,而命名视图允许页面通过 child@sidebar.vue 文件名约定挂载多个 输出。useFetch 和 useAsyncData 还新增了 reactive 选项,用于控制有条件的数据获取。

报告称,内置的新 useLayout 与 Vuetify 中同名的可组合函数发生了冲突,触发了 NUXT_B6002 警告。Roe 回应称,他很乐意将相关项目添加到生态系统测试中:

如果有什么好的项目可以添加到 https://github.com/nuxt/ecosystem-ci 中,以便在发布前发现这类问题,我非常乐意这样做。

进行升级的开发者应使用 nuxt upgrade --dedupe 刷新锁定文件,因为本次发布引入了 unhead v3 和 unctx v3 的重大版本迭代。升级后的 unhead v3 引入了 useHead 类型收窄,这可能会导致向后不兼容的类型变更,建议自定义插件开发者查阅 Vite 迁移指南,其中涵盖了从旧版本迁移的内容。Nuxt 3 的生命周期已于 2026 年 7 月 31 日终止。

这种流式处理的实现方式在 React 中也有先例,React 基于 Suspense 的流式服务器端渲染功能推出的更早一些。有位评论者将其描述为“与 React 此前通过 Suspense 和流式服务器端渲染所实现的转变如出一辙”,而 Nuxt 如今正在迎头赶上。

Nuxt 是一个基于 Vue 和 Nitro 服务器引擎构建的开源框架,开发者可以按照 nuxt.com 上的说明进行升级。

原文链接:https://www.infoq.com/news/2026/08/nuxt-4-5-streaming/

原始来源: InfoQ

评论 (0)