.NET 8.0 Blazor组件短暂闪烁与加载耗时翻倍问题排查求助

1. 双重渲染导致加载耗时翻倍与闪烁 #

在.NET 8 Blazor Web App模板中，使用@rendermode InteractiveAuto（或其他交互式渲染模式）的组件会经历两次完整初始化流程：

• 第一阶段：服务器端预渲染，执行组件的OnInitializedAsync（包括你模拟的2秒延迟），生成静态HTML返回给客户端，此时用户会看到静态加载状态或初始内容。
• 第二阶段：客户端加载Blazor运行时（Wasm或Server SignalR连接）后，会重新初始化该交互式组件，再次执行OnInitializedAsync，导致总耗时变为4秒，且两次渲染的内容切换会引发视觉闪烁。

即使添加[StreamRendering]特性，也仅优化了服务器预渲染时的内容流式输出，无法避免客户端接管后的二次初始化，因此闪烁问题依然存在。

2. 开发模式的放大效应 #

你提到的Tim Corey视频中开发模式"关闭很多功能"，指的是开发环境下启用了调试工具、热重载、未压缩静态资源等，这些会增加客户端加载交互式组件的延迟，让双重渲染的闪烁现象更明显。但核心问题并非开发模式本身，双重渲染的逻辑在生产环境依然存在，只是生产环境下静态资源压缩、运行时加载更快，闪烁会有所减轻，但不会消失。

针对你的场景（必须使用交互式QuickGrid），可通过以下方式解决：

方案1：复用预渲染数据，避免重复初始化 #

利用Blazor的PersistingComponentState服务，将服务器预渲染时生成的数据保存下来，客户端接管时直接复用，无需重新执行数据加载逻辑。

修改后的Weather.razor代码如下：

@page "/weather"
@using Microsoft.AspNetCore.Components.QuickGrid
@inject PersistingComponentState ComponentState
@attribute [StreamRendering]
@rendermode InteractiveAuto

<PageTitle>Weather</PageTitle>

<h1>Weather</h1>
<h1 class="text-muted">Render @(OperatingSystem.IsBrowser() ? "Wasm" : "Server")</h1>

<p>This component demonstrates showing data.</p>

@if (forecasts == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <QuickGrid Class="table" Items="forecasts" Pagination="paginationState">
        <PropertyColumn Property="@(forecast => forecast.Date)" Sortable="true" InitialSortDirection="SortDirection.Ascending" />
        <PropertyColumn Property="@(forecast => forecast.TemperatureC)" Sortable="true" />
        <PropertyColumn Property="@(forecast => forecast.TemperatureF)" Sortable="true" />
        <PropertyColumn Property="@(forecast => forecast.Summary)" Sortable="true" />
    </QuickGrid>
    <Paginator State="paginationState" />
}

@code {
    private IQueryable<WeatherForecast>? forecasts;
    PaginationState paginationState = new PaginationState { ItemsPerPage = 5 };
    private const string ForecastsKey = "WeatherForecasts";

    protected override async Task OnInitializedAsync()
    {
        // 先尝试从持久化状态中读取预渲染的数据
        if (ComponentState.TryTakeFromJson<IQueryable<WeatherForecast>>(ForecastsKey, out var savedForecasts))
        {
            forecasts = savedForecasts;
            return;
        }

        // 模拟异步加载
        await Task.Delay(2000);

        var startDate = DateOnly.FromDateTime(DateTime.Now);
        var summaries = new[] { "Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching" };
        forecasts = Enumerable.Range(1, 15).Select(index => new WeatherForecast
            {
                Date = startDate.AddDays(index),
                TemperatureC = Random.Shared.Next(-20, 55),
                Summary = summaries[Random.Shared.Next(summaries.Length)]
            }).AsQueryable();

        // 服务器预渲染时，将数据持久化到组件状态
        if (!OperatingSystem.IsBrowser())
        {
            ComponentState.PersistAsJson(ForecastsKey, forecasts);
        }
    }

    private class WeatherForecast
    {
        public DateOnly Date { get; set; }
        public int TemperatureC { get; set; }
        public string? Summary { get; set; }
        public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);
    }
}

方案2：关闭组件预渲染 #

如果不需要服务器预渲染的SEO优势，可直接禁用组件的预渲染，这样组件只会在客户端初始化一次，耗时回到2秒，且不会闪烁：

@rendermode InteractiveAuto(prerender: false)

方案3：优化加载状态的视觉体验 #

如果保留预渲染，可通过CSS隐藏静态渲染的内容，直到客户端交互式组件初始化完成，减少闪烁感：

@inject IJSRuntime JSRuntime

<!-- 在组件最外层添加容器 -->
<div id="weather-container" class="hidden">
    <!-- 原有组件内容 -->
</div>

@code {
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            // 客户端初始化完成后显示内容
            await JSRuntime.InvokeVoidAsync("document.getElementById('weather-container').classList.remove('hidden')");
        }
    }
}

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