.NET 8 Blazor Web App模板天气页面数据获取逻辑是否存在缺陷？

核心结论 #

模板默认的OnInitializedAsync数据获取逻辑确实存在缺陷：当直接刷新天气页面或通过浏览器直接请求该页面时，会触发两次数据获取操作——这是因为.NET 8 Blazor Web App默认启用了自动预渲染机制，预渲染阶段和客户端交互式渲染阶段会分别执行一次OnInitializedAsync，在长耗时数据操作场景下，会造成不必要的性能浪费和资源消耗。

问题根源 #

.NET 8 Blazor Web App的默认模板采用了服务器预渲染+客户端交互式增强的模式：

• 第一次执行：服务器端预渲染组件，生成初始HTML返回给浏览器，此时OnInitializedAsync会被调用；
• 第二次执行：客户端完成交互式增强后，组件重新初始化，OnInitializedAsync再次触发，导致数据重复请求。

优化方案 #

方案1：基于OnAfterRenderAsync的最简实现 #

利用firstRender标记确保仅在客户端首次渲染时获取数据，跳过预渲染阶段的调用：

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {
        forecasts = await weatherService.GetWeather();
        StateHasChanged();
    }
    
    await base.OnAfterRenderAsync(firstRender);
}

特点：实现简单，但会丢失预渲染的初始HTML，页面会先显示空内容或加载状态，适合对首屏静态内容要求不高的场景。

方案2：通过HttpContext区分渲染阶段 #

利用级联参数HttpContext判断当前是否处于预渲染阶段（预渲染时HttpContext存在，客户端交互式阶段为null），仅在客户端阶段执行数据获取：

[CascadingParameter]
HttpContext? HttpContext { get; set; }

protected override async Task OnInitializedAsync()
{
    if (HttpContext == null) // 仅在客户端交互式渲染阶段执行
    {
       forecasts = await weatherService.GetWeather();
    }
}

优势：保留预渲染的初始HTML，同时避免客户端重复请求，平衡了首屏加载体验和性能。

补充：加载状态实现 #

针对实际场景需求，可添加加载状态提示，提升用户体验：

private bool isLoading = true;
private WeatherForecast[]? forecasts;

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {
        isLoading = true;
        StateHasChanged();
        
        forecasts = await weatherService.GetWeather();
        
        isLoading = false;
        StateHasChanged();
    }
    
    await base.OnAfterRenderAsync(firstRender);
}

在Razor模板中添加加载状态展示：

@if (isLoading)
{
    <p>加载中...</p>
}
else if (forecasts != null)
{
    <!-- 天气数据表格渲染逻辑 -->
}

总结 #

模板默认实现未考虑预渲染与交互式渲染的生命周期重复问题，确实需要优化。两种方案各有侧重：

• 追求代码简洁选OnAfterRenderAsync方案；
• 兼顾首屏预渲染体验选HttpContext判断方案。

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