First experience with .NET8 Blazor’s Auto rendering mode

First experience with .NET8 Blazor’s Auto rendering mode

After the release of .NET8, Blazor supports four rendering methods

1. Static rendering, this kind of page can only be displayed, does not provide interaction, and can be used for web content display
2. Using Blazor Server hosting through Server interaction
3. Browser-side interaction using WebAssembly hosting
4. Use Auto to automatically interact, initially using Blazor Server, and using WebAssembly to automatically perform interactive client rendering on subsequent visits. Auto-rendering generally provides the fastest app launch experience.

Experience

When creating a Blazor application through VS, select the new template Blazor Web App. During the process, you can see that there are four templates to choose from. We can choose Auto to experience it.   

After creating a new Auto, you can see that the project template has created two projects for us: BlazorApp and BlazorApp.Client

BlazorApp is the startup project, and BlazorApp.Client is a component library

Then you can take a look at the Program in the startup project. An obvious change is that Blazor in .NET8 opens Blazor Server by adding a plug-in. Two ways to interact with WebAssembly. If not added, it is actually static mode.

builder.Services.AddRazorComponents()
     .AddInteractiveServerComponents()
     .AddInteractiveWebAssemblyComponents();

 ...
    
 app.MapRazorComponents()
     .AddInteractiveServerRenderMode()
     .AddInteractiveWebAssemblyRenderMode()
     .AddAdditionalAssemblies(typeof(Counter).Assembly);

The setting of interactive mode can be seen in Counter in the Blazor.App.Client project, using a command to set the rendering mode@rendermode InteractiveAuto

Run

We can try to run the project, switch to counter routing and see how it automatically switches the interaction mode.

First of all, please clear the Cache Storage in the Application Tab page in devtools to prevent cached wasm files from affecting the test results.

Then, you can first block all wasm through the request blocking function in devtools.

We can find that although wasm requests failed, the Auto mode uses Blazor Server to communicate. When clicking the button Afterwards, the interaction still takes effect

Then we can remove the wasm block, refresh the page, and click the Counter button, wasm interaction will also take effect

Conclusion

Therefore, in the verification Auto mode, when the wasm download is not completed or fails, the Blazor Server mode is used to interact. After the wasm download is completed, use WebAssembly to interact on the browser side to improve the user experience.

In addition, if you want to experience static interaction, you can change the rendering method in the Counter component to @renderIf mode InteractiveAuto is removed, you can experience the static interaction mode. Click the Counter button in the static interaction mode, and no response events will occur.