.NET8 Blazor新特性 流式渲染

什麼是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>。刪掉後發現第二次響應已經渲染不了了。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章