.NET 8 Blazor中@rendermode InteractiveAuto失效问题求助

我创建了一个Blazor Web App项目，项目设置如下：

启动项目后，尽管Counter.razor组件中声明了@rendermode InteractiveAuto，但Counter页面并未下载WASM文件，始终保持Server模式运行——浏览器Network标签里WebSocket一直处于活跃状态。

另外，我在NavMenu.razor中添加了以下代码，文本从未切换为"WASM"：

<h1 class="text-muted">Render @(OperatingSystem.IsBrowser() ? "Wasm" : "Server")</h1>

按照教程演示，此时应该自动下载WASM并完成渲染模式切换。我已经尝试过更换浏览器、创建自定义组件使用InteractiveAuto模式，但都没有效果。请问问题出在哪里？

客户端项目代码 #

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>

@code {
    private int currentCount = 0;

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

Program.cs #

using Microsoft.AspNetCore.Components.WebAssembly.Hosting;

var builder = WebAssemblyHostBuilder.CreateDefault(args);

await builder.Build().RunAsync();

服务器项目代码 #

Program.cs #

using TestBlazorProj.Client.Pages;
using TestBlazorProj.Components;

var builder = WebApplication.CreateBuilder(args);

// 向容器添加服务
builder.Services.AddRazorComponents()
    .AddInteractiveServerComponents()
    .AddInteractiveWebAssemblyComponents();

var app = builder.Build();

// 配置HTTP请求管道
if (app.Environment.IsDevelopment())
{
    app.UseWebAssemblyDebugging();
}
else
{
    app.UseExceptionHandler("/Error", createScopeForErrors: true);
    // 默认HSTS值为30天。生产环境可能需要修改，详见https://aka.ms/aspnetcore-hsts。
    app.UseHsts();
}

app.UseHttpsRedirection();

app.UseStaticFiles();
app.UseAntiforgery();

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

app.Run();

App.razor #

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <base href="/" />
    <link rel="stylesheet" href="bootstrap/bootstrap.min.css" />
    <link rel="stylesheet" href="app.css" />
    <link rel="stylesheet" href="TestBlazorProj.styles.css" />
    <link rel="icon" type="image/png" href="favicon.png" />
    <HeadOutlet />
</head>

<body>
    <Routes />
    <script src="_framework/blazor.web.js"></script>
</body>

</html>

问题原因及解决方法 #

1. 渲染模式检测逻辑错误 #

OperatingSystem.IsBrowser()是客户端WASM环境特有的API，如果NavMenu.razor默认以Server模式渲染（比如App组件采用Server模式），这段代码会在服务器端执行，始终返回false。要正确检测当前组件的渲染模式，改用IComponentRenderModeAccessor：

@inject IComponentRenderModeAccessor RenderModeAccessor

<h1 class="text-muted">Render @(RenderModeAccessor.Mode is InteractiveWebAssemblyRenderMode ? "Wasm" : "Server")</h1>

2. InteractiveAuto的切换需要触发交互 #

InteractiveAuto的默认逻辑是：首次加载用Server模式，用户与组件发生交互（比如点击Counter的按钮）后，才会启动WASM下载并切换到客户端模式。点击"Click me"按钮后，再观察Network标签是否出现dotnet.wasm等相关文件的下载请求。

3. 检查客户端项目依赖配置 #

确认客户端项目的.csproj文件包含Blazor WebAssembly的必要依赖：

<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">
  <PropertyGroup>
    <TargetFramework>net8.0</TargetFramework>
    <Nullable>enable</Nullable>
    <ImplicitUsings>enable</ImplicitUsings>
  </PropertyGroup>
  <ItemGroup>
    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="8.0.0" />
    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="8.0.0" PrivateAssets="all" />
  </ItemGroup>
</Project>

4. 清理浏览器缓存 #

开发环境下浏览器可能缓存旧资源，按Ctrl+Shift+R强制刷新页面，或清理缓存后重新测试。

内容的提问来源于stack exchange，提问作者Lukas