Blazor Fluxor：预加载用户专属应用状态的最佳位置问询

1. App.razor 是否适合作为预加载状态的位置？ #

App.razor 是每个用户会话的根组件：

• Blazor Server 中，每个用户会建立独立的电路，App 组件会为每个用户单独初始化执行
• Blazor WASM 中，每个客户端的 App 组件都是独立运行的
  所以它完全适合处理用户专属的状态预加载，但你的原始实现方式可以进一步优化。

2. 更优的预加载方案 #

核心思路是：利用 Fluxor 的状态监听，结合组件生命周期，确保状态加载完成后再渲染应用主体（包括布局和页面组件），同时兼容 Blazor Server 和 WASM。

优化后的 App.razor 实现 #

@inherits FluxorComponent
@using Fluxor
@using Client.Shared.Models.Authentication;
@using Client.Shared.StateStores.Authentication
@using AuthenticationState = Client.Shared.StateStores.Authentication.AuthenticationState
@using Client.Shared.LoadingIndicators
@inject IHttpContextAccessor HttpContextAccessor

<Fluxor.Blazor.Web.StoreInitializer UnhandledException="UnhandledException" />
<MudThemeProvider Theme="@(new EamTheme())" />
<MudDialogProvider />
<MudSnackbarProvider />

<!-- 状态未加载完成时显示加载屏，完成后渲染应用 -->
@if (!authenticationState.Value.Loaded)
{
    <LoadingScreen />
}
else
{
    <Router AppAssembly="@typeof(App).Assembly" AdditionalAssemblies="new[] { typeof(Home).Assembly }">
        <Found Context="routeData">
            <RouteView RouteData="@routeData" DefaultLayout="@typeof(MarineEAM.Client.BServer.Shared.MainLayout)" />
            <FocusOnNavigate RouteData="@routeData" Selector="h1" />
        </Found>
        <NotFound>
            <PageTitle>Not found</PageTitle>
            <LayoutView Layout="@typeof(MarineEAM.Client.BServer.Shared.MainLayout)">
                <p role="alert">Sorry, there's nothing at this address.</p>
            </LayoutView>
        </NotFound>
    </Router>
}

@code {
    [Inject]
    private IDispatcher Dispatcher { get; set; } = default!;

    [Inject]
    private IState<AuthenticationState> authenticationState { get; set; } = default!;

    private bool _hasInitiatedLoad;

    protected override async Task OnInitializedAsync()
    {
        // Blazor Server 预渲染阶段跳过状态加载（预渲染是静态的，无法处理用户专属状态）
        var isPrerendering = HttpContextAccessor.HttpContext?.Items.ContainsKey("__Prerendering") ?? false;
        if (!isPrerendering && !_hasInitiatedLoad)
        {
            InitiateStateLoad();
            _hasInitiatedLoad = true;
        }
        await base.OnInitializedAsync();
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        // Blazor WASM 或 Blazor Server 客户端交互阶段，确保状态加载触发
        if (firstRender && !_hasInitiatedLoad)
        {
            InitiateStateLoad();
            _hasInitiatedLoad = true;
        }
        await base.OnAfterRenderAsync(firstRender);
    }

    private void InitiateStateLoad()
    {
        if (!authenticationState.Value.Authenticated && !authenticationState.Value.Loaded)
        {
            Dispatcher.Dispatch(new LoadAuthenticationStateAction());
        }
    }

    private void UnhandledException(Fluxor.Exceptions.UnhandledExceptionEventArgs e)
    {
        Console.WriteLine("Fluxor exception: " + e.Exception.ToString());
    }
}

3. 解决 Blazor Server 预渲染导致的 firstRender 问题 #

你的代码中 firstRender 始终为 false，根源在于 Blazor Server 的预渲染机制：

• 服务器端会先执行一次组件初始化（此时 firstRender 为 true）
• 客户端连接后，会重新初始化组件实例，若用字段标记状态会出现逻辑冲突

优化方案通过以下方式解决：

• 用 IHttpContextAccessor 判断是否处于预渲染阶段，跳过预渲染时的状态加载
• 结合 OnInitializedAsync 和 OnAfterRenderAsync，分别处理 Server 交互式阶段和 WASM 的初始化
• 用 _hasInitiatedLoad 确保状态加载只执行一次

关键注意点 #

• 始终用 Fluxor 的 IState<T> 监听状态变化，确保状态加载完成后再渲染应用主体
• Blazor Server 预渲染阶段不要处理用户专属状态，因为预渲染是无状态的静态渲染
• 加载屏的逻辑要依赖 Fluxor 状态中的 Loaded 标记，确保状态完全加载后再显示应用

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