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