Blazor Web App render mode interactive auto does not switch from interactive server to interactive wasm when navigating between pages
- 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.

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**.

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
Assessment
This issue has not been assessed yet.