Nuxt 4.5: Experimental SSR Streaming, Vite 8 and an Rsbuild-Powered Rspack Builder

Nuxt 4.5：实验性SSR流式渲染、Vite 8和基于Rsbuild的Rspack构建器

作者：Daniel Curtis · InfoQ 原文

摘要：Nuxt 4.5发布，带来实验性SSR流式渲染以改善首字节时间、Vite 8升级、基于Rsbuild的Rspack 2构建器、稳定错误代码系统及新useLayout组合式函数。流式渲染对爬虫自动禁用，并需注意中间件假设的正确性问题。升级需处理unhead v3和unctx v3的破坏性变更。

Nuxt, the Vue-based full-stack web framework, has released Nuxt 4.5, their "biggest release in a while", shipping with a mix of build-layer upgrades, new runtime features, and a large amount of groundwork for the upcoming Nuxt 5.

基于Vue的全栈Web框架Nuxt发布了4.5版本，这是他们“一段时间内最大的一次发布”，包含了构建层升级、新运行时特性，并为即将到来的Nuxt 5做了大量铺垫工作。

Nuxt 4.5 moves to Vite 8, includes a Rspack 2 builder rebuilt on top of Rsbuild, experimental SSR streaming, a stable error code system, and a new useLayout composable.

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

The headline feature is experimental SSR streaming, which improves Time to First Byte by flushing the HTML shell immediately and then streaming the body as Vue renders it.

最引人注目的特性是实验性SSR流式渲染，它通过立即刷新HTML外壳，然后在Vue渲染时流式传输正文，从而改善首字节时间。

It is enabled with a single config flag:

只需一个配置标志即可启用：

export default defineNuxtConfig({ experimental: { ssrStreaming: true, }, })

Streaming is automatically disabled for bots and crawlers so search engines still receive fully rendered HTML, and routes using redirect, cache, isr, or swr rules fall back to the buffered renderer.

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

On daily.dev, one developer warned:

在daily.dev上，一位开发者警告说：

The experimental SSR streaming caveat is the part I’d test first: once the shell is flushed, late status, header, or cookie mutations can’t reach the client, so middleware assumptions become a correctness issue rather than only a performance concern.

实验性SSR流式渲染的注意事项是我会首先测试的部分：一旦外壳被刷新，后续的状态、头部或cookie修改就无法到达客户端，因此中间件假设就变成了正确性问题，而不仅仅是性能问题。

Writing on dev.to the author noted that without the streaming it took 2.5 seconds for the server to render the page, and a reader clarified that:

作者在dev.to上写道，没有流式渲染时，服务器渲染页面需要2.5秒，一位读者澄清说：

streaming does not shrink the 2.5s server work. it only changes what the browser can paint while that work still runs

流式渲染并不会减少2.5秒的服务器工作量。它只是改变了浏览器在该工作仍在运行时可以绘制的内容。

Alongside streaming, the release ships a stable error code system built on nostics, where warnings now carry a greppable code such as NUXT_E1001 with a short explanation of why it happened and a concrete fix to try.

除了流式渲染，该版本还推出了基于nostics的稳定错误代码系统，警告现在带有可搜索的代码，如NUXT_E1001，并附有简短的原因说明和具体的修复建议。

A new useLayout composable returns a read-only computed ref of the layout resolved for the current route, and named views let a page mount multiple <NuxtPage> outlets using a child@sidebar.vue filename convention.

新的useLayout组合式函数返回当前路由解析后的布局的只读计算引用，命名视图允许页面挂载多个<NuxtPage>出口，使用child@sidebar.vue文件名约定。

A reported issue showed the new built-in useLayout colliding with Vuetify's composable of the same name, raising a NUXT_B6002 warning, with Roe responding that he was happy to add projects to the ecosystem tests.

一个报告的问题显示，新的内置useLayout与Vuetify的同名组合式函数冲突，引发了NUXT_B6002警告，Roe回应说他很乐意将项目添加到生态系统测试中。

Developers upgrading should refresh their lockfile with nuxt upgrade --dedupe, since the release pulls in major bumps to unhead v3 and unctx v3.

升级的开发者应使用nuxt upgrade --dedupe刷新锁文件，因为该版本引入了unhead v3和unctx v3的重大升级。

The unhead v3 upgrade introduces type-narrowing for useHead that can be a breaking type change, and the Vite migration guide is worth checking for custom plugins.

unhead v3升级引入了useHead的类型收窄，这可能是一个破坏性的类型变更，并且Vite迁移指南值得自定义插件开发者查看。

The streaming implementation is a pattern seen elsewhere with React, whose Suspense-based streaming server rendering arrived earlier.

流式渲染实现是其他框架（如React）中已见过的模式，React基于Suspense的流式服务器渲染更早出现。

One commentator framed it as "the same shift React made earlier with Suspense and streaming server rendering," with Nuxt now "catching up."

一位评论者将其描述为“React早期通过Suspense和流式服务器渲染所做的相同转变”，而Nuxt现在正在“迎头赶上”。

阅读理解

1. What is the primary benefit of the experimental SSR streaming in Nuxt 4.5?

2. What happens when a route uses redirect, cache, isr, or swr rules with SSR streaming enabled?

3. Which of the following is a potential issue with the new useLayout composable mentioned in the article?

温故复习 →每日一句 →