Blazor Server页面API调用过快无法渲染，求无延迟解决方法

问题场景 #

我开发了一个Blazor Server应用，某页面在初始化阶段调用API获取数据，后台代码如下：

// page.razor.cs
protected override async Task OnInitializedAsync()
{
  // await Task.Delay(350); // 加350ms延迟后服务器上数据能正常渲染
  await FetchData(); // API调用
}

public async Task FetchData()
{
    loading = true;

    var paginatedResponse = await MyService.Search(searchRequest); // API调用

    records = paginatedResponse.Results;

    loading = false;
}

本地运行时数据渲染正常，但部署到服务器后，首次访问页面数据能正常显示，后续访问时FetchData()获取的数据无法加载渲染。添加短延迟后问题消失，现需无需延迟即可稳定渲染的解决方案。

解决方案 #

1. 手动触发状态变更通知 #

Blazor依赖状态变更检测触发UI渲染，异步操作后若状态变更未被自动捕获，可手动调用StateHasChanged()强制更新：

public async Task FetchData()
{
    loading = true;
    StateHasChanged(); // 通知UI显示加载状态

    var paginatedResponse = await MyService.Search(searchRequest);

    records = paginatedResponse.Results;
    loading = false;
    StateHasChanged(); // 通知UI数据已更新
}

2. 确保集合引用更新 #

若API返回的集合是复用实例（如内部缓存的List），Blazor可能无法检测到集合内容变化。需创建新的集合实例触发变更：

// 生成新集合实例，替换原引用
records = new List<YourRecordType>(paginatedResponse.Results);
// 或用LINQ生成新实例
records = paginatedResponse.Results.ToList();

3. 适配路由参数变化的生命周期 #

如果页面包含路由参数，后续访问参数变化时OnInitializedAsync不会重新执行（组件实例被复用），需在OnParametersSetAsync中重新加载数据：

protected override async Task OnParametersSetAsync()
{
    await FetchData(); // 参数变化时重新触发数据加载
}

4. 切换到UI线程更新状态 #

若API调用的回调在非UI线程执行，需通过InvokeAsync切换到UI线程修改状态：

public async Task FetchData()
{
    await InvokeAsync(() =>
    {
        loading = true;
        StateHasChanged();
    });

    var paginatedResponse = await MyService.Search(searchRequest);

    await InvokeAsync(() =>
    {
        records = paginatedResponse.Results;
        loading = false;
        StateHasChanged();
    });
}

5. 禁用组件缓存 #

若应用启用了组件缓存（如@attribute [ComponentCache]或第三方缓存库），后续访问可能复用旧组件实例导致数据未刷新，需移除相关缓存配置。

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