Blazor Streaming Rendering是.NET 8引入的一种服务端渲染模式，它允许Razor组件在等待异步任务完成前，先将已经渲染好的HTML片段流式传输到客户端，从而避免整页阻塞。这种方式特别适合需要调用接口或查询数据库后才能展示完整内容的页面。
什么是Streaming Rendering
在传统的服务端渲染中，组件必须等所有异步逻辑执行完毕，才将完整HTML返回浏览器。Streaming Rendering则不同，它在组件生命周期内通过HTTP流分多次发送内容。初始内容可以是一个加载提示，随后数据就绪后再推送真实结果。
如何启用Streaming Rendering
在Blazor Web App模板中，默认使用静态服务端渲染。要开启流式渲染，只需在组件顶部添加指令。下面以Razor组件为例。
@page "/weather"
@using System.Threading.Tasks
@rendermode RenderMode.InteractiveServer
<h3>天气信息</h3>
@if (forecast == null)
{
<p>正在加载数据...</p>
}
else
{
<ul>
@foreach (var item in forecast)
{
<li>@item.Date: @item.TempC°C</li>
}
</ul>
}
@code {
private List<Weather>? forecast;
protected override async Task OnInitializedAsync()
{
// 模拟耗时数据获取
await Task.Delay(3000);
forecast = new List<Weather>
{
new Weather { Date = "周一", TempC = 20 },
new Weather { Date = "周二", TempC = 22 }
};
}
public class Weather
{
public string Date { get; set; } = "";
public int TempC { get; set; }
}
}
上面的代码在OnInitializedAsync中模拟了三秒延迟。启用流式渲染后，用户会先看到“正在加载数据”，三秒后列表自动出现，而不会出现白屏。
全局与局部配置
你可以在单个组件使用@rendermode指令，也可以在App.razor中统一设置。若使用.NET 8的默认模板，可将Routes组件配置为支持流式渲染。
常见注意事项
- 流式渲染仅适用于服务端渲染场景，纯客户端WebAssembly不支持。
- 确保中间件未缓冲响应，例如某些反向代理需关闭缓冲。
- 不要在流式传输中依赖后期才赋值的局部变量直接渲染，否则会引发空引用。
简单对比
| 渲染模式 | 首屏速度 | 数据等待表现 |
|---|---|---|
| 普通SSR | 慢 | 白屏直至完成 |
| Streaming Rendering | 快 | 先显占位后显数据 |
通过合理使用Blazor Streaming Rendering，你可以明显提升后台查询或接口调用较多页面的用户体验。建议在新项目的数据页中优先尝试该特性。
BlazorStreaming_Rendering流式渲染修改时间：2026-07-29 01:00:18