dotnet / dotnet/aspnetcore

Blazor Web App render mode interactive auto does not switch from interactive server to interactive wasm when navigating between pages

Open
#53,799 5 comments 3 reactions 0 assignees View on GitHub
area-blazor enhancement
Dominant language
C#
Stars
38.4k
Forks
10.9k
Avg merge
2d 5h
Merged PRs (30d)
276

Description

### Is there an existing issue for this?

- [X] I have searched the existing issues

### Describe the bug

When using the default Blazor Web App template with interactivity set to auto and per page/component, first time visiting Counter page results in the page being rendered as **InteractiveServer** which is completely fine, after navigating to Home or to Weather page and then back to Counter, it is rendered in **InteractiveWasm** which is also great.

The problem occurs when I transfer the Weather page to Client project and set it to **InteractiveAuto**. After running the application and navigating to Counter or Weather page, the initial load happens in **InteractiveServer** which is also fine, but no matter how many times I navigate between Counter and Weather pages, it never makes a switch to **InteractiveWasm** as it does in the case when I navigate to Home and then back to Counter.

### Expected Behavior

I would expect that after the WASM files are downloaded, the application would make a switch to **InteractiveWasm** when navigating between **InteractiveAuto** pages. As it does when I navigate from Counter to Home and back to Counter.

When navigating from Counter to Home a POST request is made to https://localhost/_blazor/disconnect with circuitId as payload which disconnects the WebSocket.
![image](https://github.com/dotnet/aspnetcore/assets/24671023/e6ad0836-a61e-483d-8a0f-9575879ab8cc)
So when navigating back to the Counter page a GET request is made for blazor-hotreload.js which apparently switches the application from **InteractiveServer** to **InteractiveWasm**.
![image](https://github.com/dotnet/aspnetcore/assets/24671023/e02dd9cb-e609-4f88-b74a-aa4b0bd5117c)

So as far I can see, the functionality is there, is there a way to force the switch to **InteractiveWasm** when navigating from one **InteractiveAuto** to another **InteractiveAuto** page after the WASM files are downloaded?

### Steps To Reproduce

1. Create a new project with Blazor Web App template.
2. Set Interactive render mode to **Auto (Server and WebAssembly)**.
3. Set Interactivity location to **Per page/component**.
4. Delete _Weather_ page from Server project and re-create it in Client project.
5. Set _Weather_ page `@rendermode InteractiveAuto`.
6. Create DisplayRenderMode.razor component in Client project with following code:
```

Render Mode: @_renderMode

@code {
private string _renderMode = "Static server-side rendering";

protected override async Task OnAfterRenderAsync(bool firstRender)
{
await base.OnAfterRenderAsync(firstRender);
if (firstRender)
{
_renderMode = OperatingSystem.IsBrowser() ? "Client-side rendering" : "Active server-side rendering";
StateHasChanged();
}
}
}
```
7. Add `` to _Home_, _Counter_ and _Weather_ pages.
8. Launch the application.
9. Navigate to _Counter_, observe **Render Mode: Active server-side rendering**.
10. Navigate back and forth between _Counter_ and _Weather_ pages observing Render Mode not changing.
11. Navigate to Home and then to _Counter_ or _Weather_ page, observe the change to **Render Mode: Client-side rendering**.

Here is the minimalistic project which reproduces this issue: https://github.com/lokitech/Blazor-Web-App-Render-Modes-Bug

### Exceptions (if any)

_No response_

### .NET Version

8.0.1

### Anything else?

_No response_

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.