经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » 程序设计 » ASP.net » 查看文章
.NET8 Blazor新特性 流式渲染
来源:cnblogs  作者:chester·chen  时间:2023/11/20 8:57:05  对本文有异议

什么是SSR

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



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

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

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

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

 

什么是流式渲染

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

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

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

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

 

体验Blazor流式渲染

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

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

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

  1. @page "/weather"
  2. @attribute [StreamRendering]
  3. <PageTitle>Weather</PageTitle>
  4. <h1>Weather</h1>
  5. ......
  6. }
  7. @code {
  8. protected override async Task OnInitializedAsync()
  9. {
  10. // Simulate asynchronous loading to demonstrate streaming rendering
  11. await Task.Delay(5000);
  12. .......
  13. }
  14. }

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

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

 

谁对多次响应进行了处理

其实是blazor.web.js拦截了多次响应,并将其渲染到对应位置。想要测试的话可以尝试删掉App.razor中的<script src="_framework/blazor.web.js"></script>。删掉后发现第二次响应已经渲染不了了。

原文链接:https://www.cnblogs.com/chenyishi/p/17839086.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号