blazorblazor-webassembly

How to disable wasm secondary rendering of pages in blazor auto mode?


When a page is requested, server-side rendering is performed first, and then the browser displays the server-side rendered content. When the wasm download is completed, the page is rendered. If the rendering logic of the server and wasm are different, the page will flash.

For Example:

@if(imageID == 0)
{
    <img src="images/banner1.jpeg" class="w-full object-cover object-center">
}
else if(imageID == 1)
{
    <img src="images/banner2.jpeg" class="w-full object-cover object-center">
}
else 
{
    
}

@code{
    int imageID = -1;

    protected override void OnInitialized()
    {
        Random rd = new Random();
        imageID = rd.Next(1, 1000) % 2;
    } 
} 

I want the page to be rendered only once but I don't find a way.

In addition to disabling wasm secondary rendering, are there any other methods?

thanks


Solution

  • We can use @rendermode @(new InteractiveAutoRenderMode(prerender: false)) to disable prerender which is enabled by default in interactive mode to avoid the OnInitialized being triggered twice.

    ============================

    blazor auto mode shall be blazor web app Interactive Auto render mode in .net 8. We call it as blazor web app and auto mode will both have the client APP and the server APP, the client APP works as the wsam. Like screenshot below, the home page has @rendermode InteractiveServer, so that in the first loading, it doesn't have any wsam loaded. While the Counter Page will have wsam after I added @rendermode InteractiveWebAssembly. The render mode is the difference.

    enter image description here enter image description here

    And I didn't understand what If the rendering logic of the server and wasm are different, the page will flash. means, but for the page to be rendered only once, I'm afraid you are concerned about the prerendering feature of the Server Side rendered((wsam is rendered completely in the client side so that it doesn't have server side prerender).), because when we add a break point in the OnInitialized method, we will see it being triggered twice.

    Then we can add @rendermode @(new InteractiveServerRenderMode(prerender: false)) to disable prerendering and the OnInitialized will be triggered only once.