Blazor Server Prerendering变量不持久化：如何仅执行一次初始化代码？

你遇到的核心问题是：预渲染阶段的组件实例和后续交互式渲染的组件实例是完全独立的两个对象，所以组件内的本地变量（比如isInitialized）无法在两个阶段之间共享，这才导致你之前的判断逻辑失效。下面是几种可靠的解决方法：

方法一：使用PersistentComponentState（官方推荐方案） #

Blazor提供了PersistentComponentState服务，专门用于在预渲染和交互式渲染之间传递状态。

实现步骤： #

1. 注入PersistentComponentState服务
2. 定义一个唯一状态键，用来标记是否已完成初始化
3. 在组件初始化时检查状态，未初始化则执行逻辑并保存状态

@inject PersistentComponentState PersistentState

@code {
    private bool _isInitialized;
    private readonly string _initializedKey = "MyComponent_Initialized";

    protected override async Task OnInitializedAsync()
    {
        // 检查预渲染阶段是否已完成初始化
        if (PersistentState.TryTakeFromJson<bool>(_initializedKey, out var initialized) && initialized)
        {
            _isInitialized = true;
            return;
        }

        // 执行数据库交互等初始化逻辑
        await Initialize();
        _isInitialized = true;

        // 将状态保存，传递给后续交互式渲染的组件实例
        PersistentState.PersistAsJson(_initializedKey, true);
    }

    private async Task Initialize()
    {
        // 你的数据库操作代码
        // 示例：await _dbContext.UserData.LoadAsync();
    }
}

方法二：使用Scoped服务封装初始化逻辑 #

把初始化逻辑放到Scoped服务中，同一个用户会话的Scoped服务实例是共享的，预渲染和交互式渲染会使用同一个服务实例，因此可以用服务内的标记控制只执行一次。

实现步骤： #

1. 创建Scoped服务：

public class DataInitializerService
{
    public bool IsInitialized { get; private set; }

    public async Task InitializeAsync()
    {
        if (IsInitialized) return;

        // 执行数据库交互等初始化逻辑
        // 示例：await _dbContext.ProductData.LoadAsync();

        IsInitialized = true;
    }
}

2. 在Program.cs中注册服务：

builder.Services.AddScoped<DataInitializerService>();

3. 在组件中注入并使用：

@inject DataInitializerService Initializer

@code {
    protected override async Task OnInitializedAsync()
    {
        await Initializer.InitializeAsync();
    }
}

方法三：仅在交互式渲染阶段执行初始化（适合无需预渲染数据的场景） #

如果你的初始化逻辑不需要在预渲染阶段执行（即预渲染页面不需要展示数据库数据），可以只在交互式渲染阶段触发，通过IsInteractive属性判断当前是否处于交互式渲染状态：

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender && IsInteractive)
    {
        // 仅在交互式渲染的首次渲染时执行
        await Initialize();
    }
}

private async Task Initialize()
{
    // 你的数据库操作代码
}

为什么你之前的代码无效？ #

• 组件内的isInitialized属于组件实例，预渲染和交互式渲染是两个完全独立的实例，第二次渲染时变量会被重新初始化，始终为false。
• 手动调用OnInitializedAsync()是错误的，Blazor的生命周期方法由框架自动调用，手动调用会破坏生命周期流程，导致错误。

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