.NET8 Blazor新特性 流式渲染
什么是SSRBlazor中的流式渲染结合了SSR（服务端渲染），服务端将HTML拼好返回给前端，有点像我们熟知的Razor Pages 或 MVC 。
https://img2023.cnblogs.com/blog/1033233/202311/1033233-20231117155745890-602733095.png
当已经有了 Razor Pages 或 MVC 时，为什么还要选择使用 Blazor 来实现这一点？这里有几个原因。
首先，Razor Pages 和 MVC 没有像Blazor这样提供了很好的可重用组件。
其次，当选择 Razor Pages 或 MVC 时，我们将被固定在SSR渲染应用程序中。
如果您想添加任何客户端交互性，一种选择是JS另一种选择是Blazor。那么为什么不只使用 Blazor 来完成所有事情呢？
什么是流式渲染
用户常遇到长耗时的处理，比如查询数据库，通常的处理方式是等长耗时处理结束，再响应给浏览器，用户体验比较差。
而流式渲染将响应拆为多次。第一次响应很快返回客户端，并使用占位符内容快速渲染整个页面，同时执行比较耗时的异步操作。
耗时操作完成后，新的内容将使用与前一次响应相同的连接，发送到客户端，并更新到DOM中。
这样用户不需要等待耗时地操作，就可以看到一个包含占位符地页面，可以很好地改善用户体验。
https://img2023.cnblogs.com/blog/1033233/202311/1033233-20231117161225927-309726018.png
体验Blazor流式渲染
Blazor中的流式渲染只需要在组件上添加指令@attribute 即可生成一个流式渲染组件。
我们可以根据VS中的Blazor Web APP模板创建一个Server渲染方式的项目
https://img2023.cnblogs.com/blog/1033233/202311/1033233-20231117161511986-1555708757.png
创建完后，其中的Weather组件，默认开启了流式渲染 @attribute 。我们可以将OnInitializedAsync中的delay事件改为5000，来更明显的体验。
@page "/weather"@attribute WeatherWeather
......}@code { protected override async Task OnInitializedAsync() { // Simulate asynchronous loading to demonstrate streaming rendering await Task.Delay(5000); ....... }}启动后可以看到weather请求，其实是一个get请求，这里体现了Blazor的Stream Rendering组件其实用了SSR方式。
https://img2023.cnblogs.com/blog/1033233/202311/1033233-20231117161925262-623813178.png
5s后剩余的数据在同一个连接中返回
https://img2023.cnblogs.com/blog/1033233/202311/1033233-20231117162027853-1080401500.png
谁对多次响应进行了处理
其实是blazor.web.js拦截了多次响应，并将其渲染到对应位置。想要测试的话可以尝试删掉App.razor中的。删掉后发现第二次响应已经渲染不了了。
来源:https://www.cnblogs.com/chenyishi/archive/2023/11/19/17839086.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！
页:
[1]