Blazor中使用Router实现页面转场导致内容加载过慢

问题描述 #

在Blazor Web App模板（Blazor Server模式）中使用BlazorTransitionableRoute组件实现页面转场时，转场功能正常，但页面加载流程出现异常：

• 修改Router配置后，页面会先加载布局框架，数秒后（推测等待Blazor SignalR连接完成）才显示页面内容
• 本地开发环境加载速度较快，但发布到生产环境后延迟明显，Lighthouse会误判仅加载布局的页面为完全加载状态
• 每次刷新页面都会触发该延迟，并非仅硬刷新时出现

默认Router配置（运行正常） #

<CascadingBlazoredModal Class="modal">
    <Router AppAssembly="typeof(Program).Assembly">
        <Found Context="routeData">
            <RouteView RouteData="routeData" DefaultLayout="typeof(Layout.MainLayout)" />
            <FocusOnNavigate RouteData="routeData" Selector="h1" />
        </Found>
    </Router>
</CascadingBlazoredModal>

修改后的Router配置（出现问题） #

<CascadingBlazoredModal Class="modal">
    <Router AppAssembly="typeof(Program).Assembly">
        <Found Context="routeData">
            <LayoutView Layout="@typeof(Layout.MainLayout)">
                <TransitionableRoutePrimary RouteData="@routeData" ForgetStateOnTransition="true">
                    <TransitionableRouteView DefaultLayout="@typeof(Layout.TransitionViewLayout)" />
                </TransitionableRoutePrimary>
                <TransitionableRouteSecondary RouteData="@routeData" ForgetStateOnTransition="true">
                    <TransitionableRouteView DefaultLayout="@typeof(Layout.TransitionViewLayout)" />
                </TransitionableRouteSecondary>
            </LayoutView>
        </Found>
    </Router>
</CascadingBlazoredModal>

可能原因及解决方案 #

1. 组件渲染时机不匹配 #

BlazorTransitionableRoute的TransitionableRoutePrimary/TransitionableRouteSecondary组件可能依赖SignalR连接完全建立后才开始渲染内容，而默认RouteView支持服务器端预渲染，能更早输出页面内容。

解决思路：

• 检查项目是否启用服务器端预渲染，确认TransitionableRoute组件是否支持预渲染逻辑。若组件不支持预渲染，需调整配置让布局与内容的渲染时机对齐
• 尝试直接在TransitionableRouteView中指定页面组件，避免依赖DefaultLayout的嵌套渲染逻辑

2. 双重布局嵌套的性能开销 #

修改后的配置同时使用LayoutView（绑定MainLayout）和TransitionableRouteView（绑定TransitionViewLayout），导致布局嵌套层级增加，生产环境下额外的渲染逻辑放大了延迟。

解决思路：

• 合并布局逻辑：将TransitionViewLayout的过渡动画等内容整合到MainLayout中，或让TransitionableRoute直接使用MainLayout作为默认布局，减少嵌套层级
• 简化Router配置，移除多余的LayoutView：

<TransitionableRoutePrimary RouteData="@routeData" ForgetStateOnTransition="true">
    <TransitionableRouteView DefaultLayout="@typeof(Layout.MainLayout)" />
</TransitionableRoutePrimary>
<TransitionableRouteSecondary RouteData="@routeData" ForgetStateOnTransition="true">
    <TransitionableRouteView DefaultLayout="@typeof(Layout.MainLayout)" />
</TransitionableRouteSecondary>

3. ForgetStateOnTransition的性能影响 #

设置ForgetStateOnTransition="true"会导致每次路由切换时销毁并重建组件，生产环境下服务器端组件重建的开销被放大，进而延迟内容显示。

解决思路：

• 尝试将ForgetStateOnTransition改为false，保留组件状态以减少重建开销。若业务逻辑必须销毁状态，需优化组件初始化逻辑，压缩服务器端渲染耗时

4. Lighthouse误判的根源 #

Lighthouse以初始HTML加载完成作为判定标准，而Blazor Server初始HTML仅包含布局框架，内容需等待SignalR连接建立后由服务器推送。修改后的配置让布局先渲染、内容延迟，导致Lighthouse误判。

解决思路：

• 启用Blazor Server预渲染功能，确保初始HTML包含页面内容而非仅布局框架。在Program.cs中配置：

builder.Services.AddRazorComponents()
    .AddInteractiveServerComponents()
    .AddServerRenderMode();

• 确保App.razor中的预渲染逻辑正确，让TransitionableRoute组件在预渲染阶段就能生成内容HTML

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