Blazor WASM预渲染功能在页面导航后崩溃

问题场景 #

• Windows 10 本地运行 .NET 7 Blazor WASM 应用，已按官方文档配置预渲染（服务器端配置Program.cs与_Host.cshtml，客户端删除index.html及根组件注册代码）
• 页面来回导航时浏览器冻结，Chrome开发者工具无任何错误提示
• 排查确认：服务中调用的Action事件是问题根源，该功能在非预渲染的普通WASM项目中可正常运行

核心原因 #

预渲染模式下，Blazor先在服务器端执行组件逻辑、生成静态内容，再由客户端接管交互。如果服务中的Action事件在服务器预渲染阶段被触发，而事件绑定的是客户端专属逻辑（比如组件状态更新、JS互操作），会引发：

• 服务器端无法执行客户端上下文代码，导致隐性死锁
• 客户端接管后事件绑定上下文混乱，阻塞渲染线程

解决方案 #

1. 区分环境执行事件 #

在服务中通过IWebAssemblyJSRuntime的可用性判断客户端环境，仅在客户端触发Action：

public class MyService
{
    private readonly IWebAssemblyJSRuntime? _jsRuntime;
    private bool IsClientSide => _jsRuntime != null;

    public MyService(IWebAssemblyJSRuntime? jsRuntime = null)
    {
        _jsRuntime = jsRuntime;
    }

    public void TriggerAction()
    {
        if (IsClientSide)
        {
            MyAction?.Invoke();
        }
    }

    public Action? MyAction { get; set; }
}

2. 延迟事件绑定到客户端初始化后 #

在组件的OnAfterRenderAsync生命周期中绑定事件，确保仅在客户端接管后执行：

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {
        _myService.MyAction += HandleActionTrigger;
    }
}

private void HandleActionTrigger()
{
    StateHasChanged();
}

public void Dispose()
{
    _myService.MyAction -= HandleActionTrigger;
}

3. 预渲染阶段跳过触发Action的服务调用 #

在组件中通过IHttpContextAccessor判断预渲染环境，避免执行触发Action的逻辑：

protected override async Task OnInitializedAsync()
{
    var isPrerendering = _httpContextAccessor.HttpContext != null;
    if (!isPrerendering)
    {
        await _myService.DoActionTriggeringWork();
    }
}

验证方式 #

1. 多次在页面间导航，确认浏览器不再冻结
2. 查看Chrome DevTools的Performance面板，确认渲染线程无阻塞
3. 检查服务器日志，确保预渲染阶段未执行客户端专属逻辑

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