.NET 8 Blazor级联参数服务器渲染时丢失问题求助

问题详情 #

在.NET 8 Blazor Server Interactive模式应用中使用级联参数时，页面加载时参数会短暂显示后消失。调试确认预渲染阶段ThemeInfo级联参数设置正常，但服务器端二次加载时所有级联参数均为null。已按照微软官方文档配置，但仅预渲染时能正常级联，服务器渲染时参数丢失。

相关代码 #

@page "/themed-counter"
@using BlazorSample.UIThemeClasses

@rendermode ServerInteractive

<h1>Themed Counter</h1>

<p>Current count: @currentCount</p>

<p>
    <button @onclick="IncrementCount">
        Increment Counter (Unthemed)
    </button>
</p>

<p>
    <button 
        class="btn @(ThemeInfo is not null ? ThemeInfo.ButtonClass : string.Empty)" 
        @onclick="IncrementCount">
        Increment Counter (Themed)
    </button>
</p>

@code {
    private int currentCount = 0;

    [CascadingParameter]
    // 仅预渲染时能正确级联该ThemeInfo
    protected ThemeInfo? ThemeInfo { get; set; } 

    private void IncrementCount()
    {
        currentCount++;
    }
}

解决方案 #

1. 确保根组件在交互式渲染阶段提供级联值 #

.NET 8的ServerInteractive模式下，预渲染和交互式渲染是独立的流程。如果级联参数由根组件（如App.razor）通过<CascadingValue>提供，需确保根组件在交互式渲染阶段仍能正确生成并传递该值：

• 检查根组件中设置级联值的逻辑，避免仅在预渲染阶段执行（比如不要依赖仅预渲染时可用的上下文）；
• 若级联值依赖服务，确保服务在两种渲染模式下都能正常注入和初始化。

2. 持久化预渲染状态到交互式阶段 #

利用Blazor的PersistComponentState服务，将预渲染时的ThemeInfo保存，在交互式渲染时恢复：

首先注入服务：

@inject PersistComponentState PersistComponentState

然后在组件中添加状态保存和恢复逻辑：

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender && ThemeInfo is not null)
    {
        PersistComponentState.Persist(nameof(ThemeInfo), ThemeInfo);
    }
    await base.OnAfterRenderAsync(firstRender);
}

protected override async Task OnInitializedAsync()
{
    if (PersistComponentState.TryTakeFromJson<ThemeInfo>(nameof(ThemeInfo), out var savedTheme))
    {
        ThemeInfo = savedTheme;
    }
    await base.OnInitializedAsync();
}

3. 临时禁用预渲染排查 #

若需快速验证问题是否由预渲染导致，可修改页面的渲染模式，禁用预渲染：

@rendermode @(new InteractiveServerRenderMode(prerender: false))

注意：此方案会降低首屏加载性能，仅用于排查，不建议作为长期解决方案。

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