0

0

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

畫卷琴夢

畫卷琴夢

发布时间:2025-12-18 10:58:03

|

567人浏览过

|

来源于php中文网

原创

blazor在.net 8中正式支持流式渲染,通过边生成、边传输、边显示降低首屏时间;需满足.net 8+、blazor server或预渲染+流式水合的webassembly配置、正确设置@rendermode且未禁用流式。

.net 8 blazor 流式渲染(streaming rendering)怎么用

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 和运行模型。

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
DOM是什么意思
DOM是什么意思

dom的英文全称是documentobjectmodel,表示文件对象模型,是w3c组织推荐的处理可扩展置标语言的标准编程接口;dom是html文档的内存中对象表示,它提供了使用javascript与网页交互的方式。想了解更多的相关内容,可以阅读本专题下面的文章。

3767

2024.08.14

Golang WebAssembly(WASM)开发入门
Golang WebAssembly(WASM)开发入门

本专题系统讲解 Golang 在 WebAssembly(WASM)开发中的实践方法,涵盖 WASM 基础原理、Go 编译到 WASM 的流程、与 JavaScript 的交互方式、性能与体积优化,以及典型应用场景(如前端计算、跨平台模块)。帮助开发者掌握 Go 在新一代 Web 技术栈中的应用能力。

20

2026.02.02

seo页面描述
seo页面描述

一个好的SEO页面描述应该包含关键词、简明扼要地概括网页的主题和内容、具有吸引力、与网页内容相符,并且是独特的。它不仅可以帮助搜索引擎了解网页的内容,还可以吸引用户点击进入网页。因此,编写一个优秀的SEO页面描述对于网页的排名和点击率都非常重要。

218

2023.08.31

wordpress seo
wordpress seo

WordPress网站SEO优化方法有:1、选择一个SEO友好的主题,具有清晰的代码结构,快速的加载速度和响应式设计;2、使用SEO插件,优化你的标题标签,元描述,关键字,XML站点地图等;3、优化你的内容,内容是SEO优化的核心;4、优化你的网站速度;5、创建友好的URL;6、使用内部链接;7、优化图像;8、使用社交媒体;9、定期更新你的网站;10、监控和分析你的网站等等。

427

2023.09.18

SEO诊断方法有哪些
SEO诊断方法有哪些

SEO诊断是一个综合性的工作,需要从网站结构、关键词优化、内容质量、外部链接、网站速度、移动友好性等多个方面进行评估和优化。通过进行SEO诊断,可以帮助网站提高在搜索引擎中的排名,从而增加流量和曝光度 。

296

2023.10.09

SEO关键词排名工具有哪些
SEO关键词排名工具有哪些

SEO关键词排名工具有Google关键词规划工具、百度关键词工具、SEMrush、Ahrefs、Moz Keyword Explorer、KWFinder、Ubersuggest、Keyword Surfer、AnswerThePublic和Google Trends。更多关于SEO关键词排名工具的文章,详情请继续阅读该专题下面的文章。php中文网欢迎大家前来学习。

389

2023.10.30

pixiv网页版官网登录与阅读指南_pixiv官网直达入口与在线访问方法
pixiv网页版官网登录与阅读指南_pixiv官网直达入口与在线访问方法

本专题系统整理pixiv网页版官网入口及登录访问方式,涵盖官网登录页面直达路径、在线阅读入口及快速进入方法说明,帮助用户高效找到pixiv官方网站,实现便捷、安全的网页端浏览与账号登录体验。

561

2026.02.13

微博网页版主页入口与登录指南_官方网页端快速访问方法
微博网页版主页入口与登录指南_官方网页端快速访问方法

本专题系统整理微博网页版官方入口及网页端登录方式,涵盖首页直达地址、账号登录流程与常见访问问题说明,帮助用户快速找到微博官网主页,实现便捷、安全的网页端登录与内容浏览体验。

165

2026.02.13

Flutter跨平台开发与状态管理实战
Flutter跨平台开发与状态管理实战

本专题围绕Flutter框架展开,系统讲解跨平台UI构建原理与状态管理方案。内容涵盖Widget生命周期、路由管理、Provider与Bloc状态管理模式、网络请求封装及性能优化技巧。通过实战项目演示,帮助开发者构建流畅、可维护的跨平台移动应用。

90

2026.02.13

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3.4万人学习

AngularJS教程
AngularJS教程

共24课时 | 3.7万人学习

CSS教程
CSS教程

共754课时 | 33.4万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号