Exploring Interactive Auto Rendering Mode in Blazor .Net 8.0

With the release of .Net 8.0, Microsoft introduced a new feature of auto rendering mode. In this blog post, we will unleash the details of this rendering mode and explore how it allows users to create highly interactive web applications. Let’s dive in!

What is Interactive Auto Rendering Mode?

Auto render mode is a combination of both blazor server and web assembly rendering, extracting their beneficial features and combining them into one mode i.e. auto render mode. The features combined are:

• Server side Initial payload: Components in blazor will run using a blazor server for the fast initial load.


• Load web assembly resources: During the first payload, Blazor web assembly files will be downloaded in the background.


• Auto shift to Blazor Wasm: Once the resources are loaded, the components will automatically use wasm for subsequent requests at runtime.

Elevating the use case of auto-rendering mode

Auto rendering is useful for all those cases that use interactive servers and web assembly. However, it gives the benefit of fast processing in the subsequent payloads by automating the feature.

Let us consider an interactive movie streaming platform. In this scenario, we are going to understand the use of auto-rendering mode.

• The users can search, browse, and watch the movies.


• Real-time updates of movie recommendations based on user’s search history, reviews, and ratings.

All of these are interactive elements and Blazor’s auto rendering mode provides such interactivity. Initial payload is handled through a web socket connection and after the web assembly resources are downloaded, further payloads are handled through wasm.

What are the benefits of Auto Render Mode?

As in the standalone blazor server no doubt the initial load is fast but in the subsequent requests there is a continuous need to communicate with the server for UI updates.

Whereas in standalone blazor Wasm the initial load is slow due to resource file downloading but subsequent requests are responded to faster as the bulk of the application is already downloaded in the initial load and there is no need for ongoing interaction with the server.

So in Auto rendering, the blazor server's initial payload with Web assembly resource load in the background reduces the user waiting time and avoids constant server interaction in subsequent requests.

Getting Started with the working of Auto Rendering Mode

Step 1: Create a new project in Visual Studio 22 using Blazor .Net 8.0:

1. Open visual studio. Navigate to create a new project and select Blazor Web App.




2. Click Next. Give a name and select the location for your project. Then click next. The following screen appears.




3. There will be 3 render modes available in this project. Select auto render mode.

Step 2: Explore the project

1. It will create two projects within one project. Here the first one is the blazor server project and the second is the client side project.




2. In the server project go to the program.cs file. Settings of both server and Wasm rendering modes will be written in this file.






3. Then go to the components where you want to use auto rendering. For example, in the client project go to the Pages folder and open Counter.razor file. There you will see the auto render mode is enabled in this file as @rendermode InteractiveAuto.

Step 3: Build and Run

Ok, let's run and see what initial and subsequent payloads run on Wasm or server.

Step 4: Inspect the browser

Go to the browser's inspect section and move to Network. When we inspect the counter page. You will see the resources are automatically downloaded and communication occurred through web sockets in the first payload and in the subsequent payloads the wasm is used and the response is fast as no continuous communication is required through web sockets in the further payloads.

In short, the auto render mode is a very beneficial feature in .Net 8.0 allowing users to render from one to another and also automating the rendering.