Blazor 8中是否有类似Vue.js asyncData的防重复渲染机制？

你遇到的问题是Blazor SSR（服务器端渲染）模式下的典型场景：服务器预渲染时生成随机天气数据，客户端完成水合后又重新执行初始化逻辑生成新的随机数据，两次数据不一致导致页面闪烁。

在Blazor 8中，**Persistent Component State（持久化组件状态）**就是类似Vue asyncData的机制，能让服务器端生成的数据传递到客户端，确保两端使用同一套数据，避免重复渲染。

具体实现步骤 #

修改你的Weather组件代码，通过IPersistentComponentState来持久化服务器生成的数据：

@page "/weather"
@inject IPersistentComponentState PersistentState

<PageTitle>Weather</PageTitle>

<h1>Weather</h1>

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

@if (forecasts == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <table class="table">
        <thead>
            <tr>
                <th>Date</th>
                <th>Temp. (C)</th>
                <th>Temp. (F)</th>
                <th>Summary</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var forecast in forecasts)
            {
                <tr>
                    <td>@forecast.Date.ToShortDateString()</td>
                    <td>@forecast.TemperatureC</td>
                    <td>@forecast.TemperatureF</td>
                    <td>@forecast.Summary</td>
                </tr>
            }
        </tbody>
    </table>
}

@code {
    private WeatherForecast[]? forecasts;

    protected override async Task OnInitializedAsync()
    {
        const string stateKey = "WeatherForecasts";
        
        // 客户端优先读取服务器持久化的数据
        if (PersistentState.TryTakeFromJson<WeatherForecast[]>(stateKey, out var storedForecasts))
        {
            forecasts = storedForecasts;
            return;
        }

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

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

        // 仅在服务器端运行时，将数据存入持久化状态
        if (!OperatingSystem.IsBrowser())
        {
            PersistentState.PersistAsJson(stateKey, 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);
    }
}

原理说明 #

• 服务器端渲染时，生成天气数据后通过PersistentState.PersistAsJson将数据存入持久化存储，这些数据会随初始HTML一起发送到客户端。
• 客户端初始化组件时，先通过PersistentState.TryTakeFromJson读取服务器传来的数据，直接复用而不是重新生成，确保两端数据一致，彻底解决闪烁问题。

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