.NET 9 Blazor跨渲染模式区域导航时预渲染空白页问题

一、现象是否正常？存在配置错误吗？ #

• 空白页现象属于预期范围但耗时偏长：设置prerender: false时，Blazor交互式服务器模式不会预渲染页面内容，浏览器需要等待SignalR连接建立、Microsoft.Data.SqlClient.dll这类依赖程序集加载完成后才能渲染页面，间隙出现空白是正常逻辑，但2-5秒的耗时已经超出合理范围，说明加载流程存在优化空间。
• 移除prerender: false后导航停留在旧页面不属于配置错误，是静态服务器渲染区域与交互式服务器区域混合时的典型问题：预渲染状态下，从静态Auth区域导航到交互式区域时，浏览器先更新地址栏，但Blazor尚未完成页面接管流程，导致视觉上停留在旧页面，直到交互式组件初始化完成。

二、加载器实现方案（在App.razor中添加） #

通过静态HTML+CSS实现加载器，配合Blazor的生命周期事件控制显示/隐藏，具体步骤如下：

1. 修改App.razor，在<body>内先加入静态加载器元素，再放置路由组件：

...
<HeadOutlet @rendermode="RenderModeForPage" />
</head>

<body>
    <!-- 静态加载器 -->
    <div id="loader" class="loader-overlay">
        <div class="loader-content">加载中...</div>
    </div>

    <Routes @rendermode="RenderModeForPage" />
    <script src="_framework/blazor.web.js"></script>
    <script src="@Assets["lib/bootstrap/dist/js/bootstrap.min.js"]"></script>
    
    <!-- 控制加载器的脚本 -->
    <script>
        // Blazor初始化完成后隐藏加载器
        document.addEventListener('blazorinitialized', function () {
            document.getElementById('loader').style.display = 'none';
        });
        
        // 导航完成后隐藏加载器
        document.addEventListener('blazornavigationcompleted', function () {
            document.getElementById('loader').style.display = 'none';
        });
        
        // 导航开始时显示加载器
        document.addEventListener('blazornavigationstarting', function () {
            document.getElementById('loader').style.display = 'flex';
        });
    </script>
</body>

</html>

@code{
    [CascadingParameter]
    private HttpContext HttpContext { get; set; } = default!;
    private IComponentRenderMode? RenderModeForPage =>
        HttpContext.Request.Path.StartsWithSegments("/Auth")
            ? null
            : new InteractiveServerRenderMode(prerender: false);
}

2. 添加加载器CSS样式（可放在全局样式文件或App.razor的<head>标签内）：

.loader-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.9);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.loader-content {
    font-size: 1.2rem;
    padding: 1rem 2rem;
    border-radius: 8px;
    background-color: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

三、额外优化建议 #

• 缩短程序集加载时间：在项目文件中启用程序集预压缩（设置<BlazorWebAssemblyEnableCompression>true</BlazorWebAssemblyEnableCompression>），或对Microsoft.Data.SqlClient.dll这类较大程序集做按需加载，避免启动时一次性加载。
• 优化SignalR连接：确保服务器端配置了合适的SignalR传输方式，减少连接建立耗时。

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