.NET 8 Blazor 流式渲染(Streaming Rendering)怎么用

来源:这里教程网 时间:2026-02-21 17:34:16 作者:

Blazor 在 .NET 8 中正式引入了流式渲染(Streaming Rendering),它不是“一次性等所有组件渲染完再发 HTML”,而是让服务器端 Blazor Server 或 Blazor WebAssembly(配合 `render-mode="InteractiveWebAssembly"` + `

` 中预加载)能边生成、边传输、边显示首屏内容,显著降低用户感知的首屏时间(TTI)和布局抖动。

启用流式渲染的前提条件

必须满足以下三点,否则会回退到传统同步渲染:

使用 .NET 8 SDK 及以上,项目目标框架为
net8.0
服务端使用 Blazor Server(目前 Blazor WebAssembly 的流式渲染仅支持“预渲染 + 流式水合”,需搭配 `@rendermode` 和 ``)
_Host.cshtml
中正确配置
@rendermode
,且不手动禁用流式(如没设
disable-streaming

服务端 Blazor Server 的标准用法

Pages/_Host.cshtml
中,将
@rendermode
设为
InteractiveServer
即可自动启用流式渲染(.NET 8 默认开启):

@rendermode InteractiveServer

无需额外代码。框架会在响应头中自动设置

text/html; streaming=true
,并把页面拆成多个 chunk 分批写入响应流。

你还可以在特定组件上按需关闭流式(比如某个复杂图表初始化慢,想等它准备好再整体显示):

<ComponentWithDelay @rendermode="new InteractiveServerRenderMode(disableStreaming: true)" />

预渲染 + 流式水合(Blazor WebAssembly 场景)

这是 WebAssembly 模式下实现“接近流式体验”的方式:先服务端预渲染静态 HTML(SEO 友好),再由 WASM 客户端渐进式接管交互逻辑。

确保
_Host.cshtml
启用预渲染:
@rendermode InteractiveWebAssembly
App.razor
或根布局中添加状态持久化支持(避免水合时丢失服务端生成的状态):
<persist-component-state />
使用
<headoutlet></headoutlet>
确保
<title></title>
<meta>
等能被正确注入

此时浏览器会先看到服务端输出的 HTML,然后 WASM 下载、启动,并“悄悄”把静态 DOM 升级为交互式组件——这个过程是渐进的,用户不会看到白屏或闪烁。

验证是否生效的小技巧

打开浏览器 DevTools → Network → 刷新页面 → 找到 HTML 请求 → 查看

Response
标签页:

如果看到 HTML 内容逐步出现(滚动到底部后新内容还在追加),说明流式生效 检查响应头是否有
content-type: text/html; streaming=true
在服务端组件中插入
@await Task.Delay(1000)
模拟延迟,观察首屏文字是否先出来、按钮后变可点——这就是流式的价值

基本上就这些。不用改业务逻辑,也不用引入新包,.NET 8 的流式渲染是开箱即用的底层优化,重点是配对正确的

@rendermode
和运行模型。

相关推荐