如何确保Blazor在WASM加载完成后执行代码？

核心原因 #

InteractiveAuto模式会先执行服务器端渲染(SSR)，此时组件运行在服务器环境，客户端WASM尚未加载，所以初始检测会得到WASM: False。偶发问题的本质是客户端接管组件后，状态未及时更新触发重渲染。

可靠解决方案 #

1. 基于IJSInProcessRuntime检测+异步重试更新状态

不要在OnInitialized/OnInitializedAsync中检测（这些方法在SSR阶段执行），而是在OnAfterRenderAsync中判断客户端JS运行时，结合异步重试确保客户端接管后更新状态：

@inject IJSRuntime JSRuntime
@implements IAsyncDisposable

<div>WASM: @isWASM</div>

@code {
    private bool isWASM;
    private bool _clientInitialized;
    private IJSInProcessRuntime? _jsRuntime;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (_clientInitialized) return;

        try
        {
            _jsRuntime = JSRuntime as IJSInProcessRuntime;
            if (_jsRuntime != null)
            {
                isWASM = true;
                // 执行你的生命周期日志逻辑
                _clientInitialized = true;
                StateHasChanged(); // 触发重渲染更新UI
            }
            else
            {
                // SSR阶段短暂延迟后重试，等待客户端接管
                await Task.Delay(80);
                StateHasChanged();
            }
        }
        catch
        {
            // 服务器端调用JS会抛出异常，忽略并重试
            await Task.Delay(80);
            StateHasChanged();
        }
    }

    public async ValueTask DisposeAsync()
    {
        _jsRuntime = null;
    }
}

2. 结合OperatingSystem.IsBrowser()简化检测

.NET 7及以上版本可用OperatingSystem.IsBrowser()直接判断是否处于客户端浏览器环境，配合firstRender确保仅在客户端首次渲染时更新状态：

<div>WASM: @isWASM</div>

@code {
    private bool isWASM;

    protected override void OnAfterRender(bool firstRender)
    {
        if (firstRender && OperatingSystem.IsBrowser())
        {
            isWASM = true;
            StateHasChanged();
            // 执行客户端生命周期日志
        }
    }
}

为什么之前的方法无效？ #

• while循环是同步阻塞操作，会卡住Blazor的UI线程，且SSR阶段循环无法等待客户端WASM加载，反而导致客户端接管延迟。
• 仅在OnAfterRender中判断但未调用StateHasChanged()，无法触发UI重渲染，导致客户端接管后状态更新无法显示。

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