Blazor Server：如何在渲染前运行异步方法解决主题闪烁

核心问题 #

你的Blazor应用需要在首次渲染前加载用户存在数据库的主题配置，当前因异步加载时机晚于初始渲染，导致页面先显示默认亮色主题再切换为用户选择的暗色主题，出现明显闪烁。

已尝试方案的问题复盘 #

• Server渲染模式：仅执行一次初始化方法，但未找到提前获取主题的思路
• ServerPrerendered渲染模式：两次初始化，首次预渲染能拿到正确主题，但第二次客户端渲染会先显示默认值再切换
• Scoped依赖缓存：两次渲染的Scope独立，无法共享缓存
• 同步调用（.Wait()/.Result）：虽解决闪烁，但存在扩展性风险（如阻塞线程、死锁隐患）

可行解决方案 #

1. 利用Blazor预渲染状态传递 #

在ServerPrerendered模式下，通过ComponentBase的PersistComponentState特性，将预渲染时获取的主题数据传递给后续的客户端渲染，避免重复查询和默认值显示。

实现步骤：

• .NET 6+已内置ComponentStatePersistence服务，无需额外注册
• 在页面中实现IPersistentComponentStateReceiver接口，预渲染时保存主题，客户端渲染时直接读取

示例代码：

@page "/"
@inject IPersistentComponentState PersistentComponentState
@implements IPersistentComponentStateReceiver

<div style="background-color: @theme; width: 200px; height: 200px;">
    <div style="color:orange">Text</div>
</div>

@code {
    private string theme = "white";
    private readonly PersistingComponentStateSubscription _subscription;

    public Index()
    {
        _subscription = PersistentComponentState.RegisterOnPersisting(PersistTheme);
    }

    protected override async Task OnInitializedAsync()
    {
        // 客户端渲染时优先读取持久化的主题
        if (PersistentComponentState.TryGetFromJson<string>("UserTheme", out var savedTheme))
        {
            theme = savedTheme;
        }
        else
        {
            // 预渲染阶段查询数据库获取主题
            await Task.Delay(1000); // 模拟数据库查询
            theme = "black";
        }
    }

    private Task PersistTheme()
    {
        // 将主题持久化，传递给客户端渲染
        PersistentComponentState.PersistAsJson("UserTheme", theme);
        return Task.CompletedTask;
    }

    public void Dispose()
    {
        _subscription.Dispose();
    }
}

2. 服务器端提前获取主题并注入 #

在请求Blazor页面的早期阶段（如中间件）获取用户主题，将其存入HttpContext.Items，组件初始化时直接读取，无需异步等待。

实现步骤：

• 编写中间件，根据用户身份查询数据库获取主题
• 注册IHttpContextAccessor服务，组件中通过它读取主题值

示例代码：

主题中间件

public class ThemeMiddleware
{
    private readonly RequestDelegate _next;

    public ThemeMiddleware(RequestDelegate next)
    {
        _next = next;
    }

    public async Task InvokeAsync(HttpContext context)
    {
        // 假设已完成用户身份认证，通过用户ID查询主题
        var userId = context.User.FindFirst(ClaimTypes.NameIdentifier)?.Value;
        if (!string.IsNullOrEmpty(userId))
        {
            await Task.Delay(1000); // 模拟数据库查询
            context.Items["UserTheme"] = "black";
        }
        await _next(context);
    }
}

// Program.cs中注册中间件
app.UseMiddleware<ThemeMiddleware>();
// 注册IHttpContextAccessor
builder.Services.AddHttpContextAccessor();

Blazor组件

@page "/"
@inject IHttpContextAccessor HttpContextAccessor

<div style="background-color: @theme; width: 200px; height: 200px;">
    <div style="color:orange">Text</div>
</div>

@code {
    private string theme;

    protected override void OnInitialized()
    {
        // 直接从HttpContext读取提前查询好的主题
        theme = HttpContextAccessor.HttpContext?.Items["UserTheme"] as string ?? "white";
    }
}

3. Cookie+JavaScript提前设置主题 #

将用户主题同步存储到Cookie，在页面加载时通过JavaScript读取Cookie并设置主题样式，彻底避免Blazor初始化前的闪烁。

实现步骤：

• 用户修改主题时，同时更新数据库和Cookie
• 在_Host.cshtml中添加JS代码，页面加载时立即设置主题
• Blazor组件初始化时同步数据库与Cookie的主题值

示例代码：

_Host.cshtml中的JS代码

<script>
    window.applyThemeFromCookie = () => {
        const themeCookie = document.cookie.split('; ').find(row => row.startsWith('UserTheme='));
        const theme = themeCookie ? themeCookie.split('=')[1] : 'white';
        document.documentElement.style.setProperty('--bg-color', theme);
    };
    // 页面加载时立即执行
    window.applyThemeFromCookie();
</script>

Blazor组件

@page "/"
@inject IJSRuntime JSRuntime

<div style="background-color: var(--bg-color); width: 200px; height: 200px;">
    <div style="color:orange">Text</div>
</div>

@code {
    private string theme = "white";

    protected override async Task OnInitializedAsync()
    {
        // 从数据库查询最新主题
        await Task.Delay(1000); // 模拟数据库查询
        theme = "black";
        // 更新Cookie并同步页面样式
        await JSRuntime.InvokeVoidAsync("document.cookie", $"UserTheme={theme}; path=/; max-age=31536000");
        await JSRuntime.InvokeVoidAsync("document.documentElement.style.setProperty", "--bg-color", theme);
    }
}

4. 禁用预渲染（Server模式） #

如果预渲染不是必须的，可将渲染模式设为Server，使用同步数据库查询获取主题（需确保数据库驱动支持同步操作，适合查询耗时极短的场景）。

方案选择建议 #

• 需保留预渲染：优先用预渲染状态传递，符合Blazor设计模式
• 用户身份认证完成早：推荐服务器端提前注入，组件无需异步等待
• 追求极致无闪烁体验：选Cookie+JavaScript，从页面加载阶段就设置主题

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