Blazor 8 InteractiveServer模式下OnInitializedAsync()重载时调用两次的问题

现象原因 #

在Blazor 8的RenderMode.InteractiveServer模式下，默认启用预渲染机制：

1. 首次请求时，服务器先执行一次组件生命周期（包括OnInitializedAsync()），生成静态HTML返回给客户端，实现快速初始渲染；
2. 客户端加载完成后，建立SignalR交互式连接，服务器会再次初始化组件实例，触发第二次OnInitializedAsync()调用。
   Chrome重载页面时会触发完整的请求流程，因此出现两次调用的现象。

现有方案分析 #

1. 缓存数据库查询结果 #

可行。预渲染阶段读取数据库并将结果存入内存缓存（如IMemoryCache），设置合理超时（如15秒）；交互式渲染阶段直接读取缓存。

• 注意事项：确保缓存键唯一（可结合页面路由参数、用户身份等），避免不同请求间数据混淆；即使预渲染耗时，缓存仍能生效，因为两次调用均在服务器端执行。

2. 在OnAfterRenderAsync(true)中读取数据库 #

可行。OnAfterRenderAsync()在预渲染阶段不会触发，仅在交互式连接建立后的首次渲染后执行，因此只会读取一次数据库。

• 注意事项：需处理加载状态（如显示加载动画），避免用户看到空白页面；更新数据后调用StateHasChanged()触发重渲染，只要逻辑控制得当，不会引发多次不必要的重渲染。

3. 通过HttpContext判断预渲染 #

可行。预渲染阶段HttpContext存在（由HTTP请求触发），交互式渲染阶段HttpContext为null，可据此跳过预渲染时的数据库读取。

• 局限性：会导致预渲染页面无数据，仅显示静态占位内容，不符合“保留快速初始渲染带数据”的需求。

其他补充方案 #

1. 使用内置级联参数IsPreRendering #

Blazor 8提供了内置的级联参数，可直接判断当前是否处于预渲染阶段：

[CascadingParameter]
private bool IsPreRendering { get; set; }

protected override async Task OnInitializedAsync()
{
    if (!IsPreRendering)
    {
        // 仅在交互式渲染阶段读取数据库
        Data = await _dbService.GetDataAsync();
    }
    // 若需预渲染带数据，可在此执行读库逻辑，后续交互式阶段复用
}

2. 利用PersistentComponentState传递预渲染数据 #

官方推荐的预渲染数据传递方案，预渲染时将数据存入PersistentComponentState，交互式渲染阶段直接恢复，无需重复读库：

private readonly PersistentComponentState _state;
private const string DataKey = "PageData";

public YourComponent(PersistentComponentState state)
{
    _state = state;
}

protected override async Task OnInitializedAsync()
{
    if (!_state.TryGetFromJson<YourDataModel>(DataKey, out var cachedData))
    {
        // 预渲染阶段读取数据库并保存状态
        cachedData = await _dbService.GetDataAsync();
        _state.PersistAsJson(DataKey, cachedData);
    }
    Data = cachedData;
}

该方案既保留预渲染的快速初始数据展示，又避免重复读库。

3. 服务层实现数据懒加载 #

将数据加载逻辑封装到服务层，使用Lazy<Task<YourDataModel>>确保仅首次调用时读取数据库：

public class DataService
{
    private readonly Lazy<Task<YourDataModel>> _lazyData;

    public DataService(YourDbContext dbContext)
    {
        _lazyData = new Lazy<Task<YourDataModel>>(async () => 
            await dbContext.YourData.FirstOrDefaultAsync());
    }

    public Task<YourDataModel> GetDataAsync() => _lazyData.Value;
}

无论组件初始化多少次，服务层仅执行一次数据库查询。

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