.NET8 Blazor new features streaming rendering

What is SSR

Streaming rendering in Blazor is combined with SSR (server-side rendering). The server assembles the HTML and returns it to the front-end, a bit like the familiar Razor Pages or MVC.

Why choose Blazor to do this when you already have Razor Pages or MVC? There are several reasons for this.

First of all, Razor Pages and MVC do not provide as good reusable components as Blazor.

Secondly, when choosing Razor Pages or MVC, we will be locked into the SSR rendering application.

If you want to add any client-side interactivity, one option is JS and another option is Blazor. So why not just use Blazor for everything?

What is streaming rendering

Users often encounter long and time-consuming processing, such as querying a database. The usual processing method is to wait for the long and time-consuming processing to end before responding to the browser. The user experience is relatively Difference.

And streaming rendering splits the response into multiple times. The first response is quickly returned to the client, and the entire page is quickly rendered with placeholder content while performing time-consuming asynchronous operations.

After the time-consuming operation is completed, the new content will be sent to the client using the same connection as the previous response and updated into the DOM.

In this way, users can see a page containing placeholders without waiting for time-consuming operations, which can greatly improve the user experience.

Experience Blazor streaming rendering

Streaming rendering in Blazor only requires adding the instruction @attribute [StreamRendering(true)] to the component to generate a streaming rendering components.

We can create a Server rendering project based on the Blazor Web APP template in VS

After creation, the Weather component has streaming rendering enabled by default @attribute [StreamRendering] . We can change the delay event in OnInitializedAsync to 5000 for a more obvious experience.

@page "/weather"
 @attribute [StreamRendering]

 Weather

 
Weather
 ...
 }

 @code {

     protected override async Task OnInitializedAsync()
     {
         // Simulate asynchronous loading to demonstrate streaming rendering
         await Task.Delay(5000);
         .......
     }

 }

After startup, you can see the weather request, which is actually a get request. This reflects that Blazor’s Stream Rendering component actually uses the SSR method.

The remaining data after 5s will be returned in the same connection

Who handled multiple responses

In fact, blazer.web.js intercepts multiple responses and renders them to the corresponding location. If you want to test it, you can try deleting in App.razor. After deleting it, I found that the second response could no longer be rendered.