.NET8 Blazor新特性 流式渲染

这篇具有很好参考价值的文章主要介绍了.NET8 Blazor新特性 流式渲染。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

什么是SSR

Blazor中的流式渲染结合了SSR(服务端渲染),服务端将HTML拼好返回给前端,有点像我们熟知的Razor Pages 或 MVC 。

.NET8 Blazor新特性 流式渲染

当已经有了 Razor Pages 或 MVC 时,为什么还要选择使用 Blazor 来实现这一点?这里有几个原因。

首先,Razor Pages 和 MVC 没有像Blazor这样提供了很好的可重用组件。

其次,当选择 Razor Pages 或 MVC 时,我们将被固定在SSR渲染应用程序中。

如果您想添加任何客户端交互性,一种选择是JS另一种选择是Blazor。那么为什么不只使用 Blazor 来完成所有事情呢?

 

什么是流式渲染

用户常遇到长耗时的处理,比如查询数据库,通常的处理方式是等长耗时处理结束,再响应给浏览器,用户体验比较差。

而流式渲染将响应拆为多次。第一次响应很快返回客户端,并使用占位符内容快速渲染整个页面,同时执行比较耗时的异步操作。

耗时操作完成后,新的内容将使用与前一次响应相同的连接,发送到客户端,并更新到DOM中。

这样用户不需要等待耗时地操作,就可以看到一个包含占位符地页面,可以很好地改善用户体验。

.NET8 Blazor新特性 流式渲染

 

体验Blazor流式渲染

Blazor中的流式渲染只需要在组件上添加指令@attribute [StreamRendering(true)]即可生成一个流式渲染组件。

我们可以根据VS中的Blazor Web APP模板创建一个Server渲染方式的项目

.NET8 Blazor新特性 流式渲染

创建完后,其中的Weather组件,默认开启了流式渲染  @attribute [StreamRendering] 。我们可以将OnInitializedAsync中的delay事件改为5000,来更明显的体验。

@page "/weather"
@attribute [StreamRendering]

<PageTitle>Weather</PageTitle>

<h1>Weather</h1>
......
}

@code {

    protected override async Task OnInitializedAsync()
    {
        // Simulate asynchronous loading to demonstrate streaming rendering
        await Task.Delay(5000);
        .......
    }

}

启动后可以看到weather请求,其实是一个get请求,这里体现了Blazor的Stream Rendering组件其实用了SSR方式。

.NET8 Blazor新特性 流式渲染

5s后剩余的数据在同一个连接中返回

.NET8 Blazor新特性 流式渲染

 

谁对多次响应进行了处理

其实是blazor.web.js拦截了多次响应,并将其渲染到对应位置。想要测试的话可以尝试删掉App.razor中的<script src="_framework/blazor.web.js"></script>。删掉后发现第二次响应已经渲染不了了。文章来源地址https://www.toymoban.com/news/detail-749042.html

到了这里,关于.NET8 Blazor新特性 流式渲染的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • ConfigureAwait in .NET8

    首先,让我们回顾一下原版 ConfigureAwait 的语义和历史,它采用了一个名为 continueOnCapturedContext 的布尔参数。 当对任务( Task 、 TaskT 、 ValueTask 或 ValueTaskT )执行 await 操作时,其默认行为是捕获“上下文”的;稍后,当任务完成时,该 async 方法将在该上下文中继续执行。“上

    2024年02月05日
    浏览(43)
  • Net8 EFCore Mysql 连接

    一、安装插件 Pomelo.EntityFrameworkCore.MySq (这里要选8.0.0以上版本低版本不支持.net8) 二、配置数据库连接串  appsettings.json 中配置数据库连接串 三、添加实体类Student和数据库上下文 新建 Entities 目录,在,根据表及字段,在目录下新建 Student 实体类,在类上加  [Table(\\\"student\\\")] 表

    2024年02月22日
    浏览(49)
  • 在NET8中使用简化的 AddJwtBearer 认证

    系统版本: win10 .NET SDK: NET8 开发工具:vscode 参考引用:使用 dotnet user-jwts 管理开发中的 JSON Web 令牌 注意:以下示例中的端口、token等需替换成你的环境中的信息 运行以下命令来创建一个空的 Web 项目,并添加 Microsoft.AspNetCore.Authentication.JwtBearer NuGet 包: 将 Program.cs 的内容替

    2024年02月05日
    浏览(40)
  • .Net8顶级技术:边界检查之IR解析(二)

    IR技术应用在各个编程语言当中,它属于JIT的核心部分,确实有点点麻烦。但部分基本明了。本篇通过.Net8里面的边界检查的小例子了解下。前情提要,看这一篇之前建议看看前一篇:点击此处,以便于理解。 1.前奏 先上C#代码: Test函数经过Roslyn编译成IL代码之后,会被JIT导

    2024年02月06日
    浏览(45)
  • .NET8 和 Vue.js 的前后端分离

    在.NET 8中实现前后端分离主要涉及到两个部分:后端API的开发和前端应用的开发。后端API通常使用ASP.NET Core来构建,而前端应用则可以使用任何前端框架或技术栈,比如Vue.js、React或Angular等。下面是一个简化的步骤指南,帮助你在.NET 8中实现前后端分离。 下面是一个简单的示

    2024年04月10日
    浏览(44)
  • NET8 ORM 使用AOT SqlSugar 和 EF Core

    .Net8的本地预编机器码NET AOT,它几乎进行了100%的自举。微软为了摆脱C++的钳制,做了很多努力。也就是代码几乎是用C#重写,包括了虚拟机,GC,内存模型等等。而需要C++做的,也就仅仅是引导程序,本篇通过代码来看下这段至关重要的引导程序的运作模式。      SqlSugar已经

    2024年02月05日
    浏览(55)
  • U8二次开发CO-基于Net8调用COM对象

    以前没有碰过U8,只知道基于Net平台构建,本次业务需求是要把钉钉和U8打通,完成代办和消息提醒。网上搜索U8相关二开资料后发现,都是一些技术片段,零零碎碎的不成体系,也有可能是大客户都去U9或者Cloud了,老旧的8面临过气与替换(个人意见),遂边琢磨边做一些示

    2024年04月14日
    浏览(30)
  • Java新特性:Stream流式编程

    Java新特性:Stream流式编程 Stream 流是 Java8 提供的新功能,是对集合对象功能的增强,能对集合对象进行各种非常便利、高效的聚合操作,或大批量数据操作。Stream 流以一种声明性方式处理数据集合,它提供串行和并行两种模式进行汇聚操作,并发模式能够充分利用多核处理

    2024年02月15日
    浏览(44)
  • Java8新特性-流式操作

    在Java8中提供了新特性—流式操作,通过流式操作可以帮助我们对数据更快速的进行一些过滤、排序、去重、最大、最小等等操作并且内置了并行流将流划分成多个线程进行并行执行,提供更高效、快速的执行能力。接下来我们一起看看Java8为我们新增了哪些便捷呢? 目录 什

    2024年02月02日
    浏览(44)
  • 开源.NET8.0小项目伪微服务框架(分布式、EFCore、Redis、RabbitMQ、Mysql等)

    为什么说是伪微服务框架,常见微服务框架可能还包括服务容错、服务间的通信、服务追踪和监控、服务注册和发现等等,而我这里为了在使用中的更简单,将很多东西进行了简化或者省略了。 年前到现在在开发一个新的小项目,刚好项目最初的很多功能是比较通用的,所以

    2024年03月09日
    浏览(55)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包