Blazor Server应用中点击后立即跳转至Products页并显示Loading标签的实现方法

核心问题分析 #

你遇到的页面跳转延迟，根源是OnInitializedAsync()里用了同步阻塞的Task.Delay(1000).Wait()——Blazor Server的导航逻辑依赖服务器端线程生成初始页面内容，同步阻塞会卡住线程，导致包含Loading标签的初始HTML无法及时返回给客户端，最终表现为停留在首页直到阻塞结束。

分步解决 #

1. 替换同步阻塞为异步await

把Wait()改成await，让线程非阻塞释放，流式渲染才能正常触发，客户端能立即收到包含Loading状态的页面框架：

@page "/products"
@inject IProductService ProductService

@if (IsLoading)
{
    <div class="p-4 text-center">
        <span class="spinner-border"></span> 加载产品数据中...
    </div>
}
else
{
    <div class="row">
        @foreach (var product in Products)
        {
            <div class="col-md-3 mb-3">
                <div class="card">
                    <div class="card-body">@product.Name</div>
                </div>
            </div>
        }
    </div>
}

@code {
    private bool IsLoading = true;
    private List<Product> Products = [];

    protected override async Task OnInitializedAsync()
    {
        try
        {
            // 用await替代Wait()，非阻塞模拟API延迟
            await Task.Delay(1000);
            // 实际API调用
            Products = await ProductService.GetProductsAsync();
        }
        finally
        {
            IsLoading = false;
            // await后框架会自动触发状态更新，此处可省略，但finally确保状态必改
            // StateHasChanged();
        }
    }
}

2. 确认流式渲染配置（默认已开启）

.NET 9 Blazor Server默认启用流式渲染，无需额外配置。如果之前手动禁用过，需在Program.cs中恢复：

builder.Services.AddRazorComponents()
    .AddInteractiveServerComponents(
        options => options.DisableStreamingRendering = false // 确保为false
    );

3. 特殊场景兼容（同步API处理）

如果必须调用同步阻塞的旧API，不要直接在组件生命周期方法里执行，而是用Task.Run把同步逻辑丢到后台线程，避免卡住渲染线程：

await Task.Run(() => {
    // 同步阻塞操作，比如老的同步数据库查询
    Thread.Sleep(1000);
});

效果验证 #

修改后点击Products页，客户端会立即跳转并显示Loading标签，1秒后自动替换为产品列表，完全符合你的预期。

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