How does the RenderMode.InteractiveAuto work in .Net 8 Blazor Web Apps?

Question

I'm trying to understand the render mode "RenderMode.InteractiveAuto". Everything works until I visit a page with the render mode "RenderMode.InteractiveServer", after that all my pages stay in render mode server.

I added this code : OperatingSystem.IsBrowser() ? "WASM":"SERVEUR" for display in which mode my page is render.

For example with the sample project "Blazor Web App", I duplicate the counter but I set the render mode to : @rendermode InteractiveServer My Visual Studio files explorer

There is the code of Counter.razor :

@page "/counter"
@rendermode InteractiveAuto

<PageTitle>Counter</PageTitle>

<h1>Counter</h1>

<p role="status">Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

<p>@(OperatingSystem.IsBrowser() ? "WASM" : "SRV")</p>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

There is the code of CounterServeur.razor :

@page "/counterSRV"
@rendermode InteractiveServer

<PageTitle>Counter</PageTitle>

<h1>Counter</h1>

<p role="status">Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

<p>@(OperatingSystem.IsBrowser() ? "WASM" : "SRV")</p>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

When I launch the application and then I go to Counter.razor (with NavMenu), my page is in WASM mode (it's ok) : Screenshot of the result

After that I go to CounterServeur.razor (with NavMenu), my page is in SERVER mode (it's ok) : Screenshot of the result

And then when I go back to Counter.razor (with NavMenu), my page is in SERVER mode and not in WASM mode : Screenshot of the result

Answer 1

I found a blog (https://shauncurtis.github.io/Posts/Mongrel-Blazor.html) that answer to my question so I share it. It seems that the the transition between Server mode and Auto mode is normal.

1. SSSR - classic Static Server Side Rendering.
2. ASSR - Active Server Side Rendering. Blazor Server.
3. CSR - Client Side Rendering. Blazor WASM/Web Assembly.

InteractiveAuto Pages don't always render in the same mode

Go to Home and then to Counter. Counter renders in CSR mode with the CSR service instance.

Now go to ASSR and then back to Counter. It's now rendered in ASSR mode, and uses the Blazor Hub service instance.

Consider saving the state of the counter in a service. You get different states depending on the render mode.

Accord to https://shauncurtis.github.io/