随笔 - 436  文章 - 0 评论 - 341 阅读 - 50万
< 2025年2月 >
26 27 28 29 30 31 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 1
2 3 4 5 6 7 8

什么是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,来更明显的体验。

@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方式。

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

 

谁对多次响应进行了处理

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


posted on   chester·chen  阅读(2800)  评论(5编辑  收藏  举报
相关博文:
阅读排行:
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· 易语言 —— 开山篇
历史上的今天:
2018-11-19 docker 进入容器
点击右上角即可分享
微信分享提示