Blazor中CampaignPage.razor的OnInitializedAsync()重复调用问题排查

问题现象 #

• 打开CampaignPage.razor时，OnInitializedAsync()方法被触发两次，两次调用间隔超过5秒
• ReturnUrl属性在两次OnInitializedAsync()调用以及后续HandleValidSubmitAsync()调用中始终为null
• 问题仅在页面mode为read或update时出现，此时OnInitializedAsync()内会调用Campaigns.FindByNames()方法；当mode为create时仅调用Countries.All()，无异常

两次调用的调用栈分别为：
首次调用栈：

LouisHowe.web.dll!LouisHowe.web.Pages.Manager.CampaignPage.OnInitializedAsync() Line 143    C#
[External Code] 
LouisHowe.web.dll!LouisHowe.web.Pages.Pages__Host.ExecuteAsync.AnonymousMethod__23_1() Line 40  C#
[External Code] 

第二次调用栈：

LouisHowe.web.dll!LouisHowe.web.Pages.Manager.CampaignPage.OnInitializedAsync() Line 143    C#
[External Code] 

排查发现 #

添加调试日志后确认：

• 异常场景下会初始化两个不同的页面实例
• 每次调用OnInitializedAsync()前，都会查询AspNetUsers表以初始化Task<AuthenticationState>级联参数

解决方案 #

将_Host.cshtml中所有组件的render-mode修改为Server后，问题彻底解决。修改后的完整代码如下：

@page "/"
@using Microsoft.AspNetCore.Components.Web
@using Microsoft.AspNetCore.Mvc.TagHelpers
@using LouisHowe.web
@namespace LouisHowe.web.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@inject Microsoft.AspNetCore.Antiforgery.IAntiforgery Xsrf

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Copyright (c) 2023 by David Thielen - ALL RIGHTS RESERVED -->
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <base href="~/"/>
    <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css"/>
    <link href="_content/DevExpress.Blazor.Themes/blazing-berry.bs5.min.css" rel="stylesheet"
          asp-append-version="true"/>
    <link href="css/site.css" rel="stylesheet" asp-append-version="true"/>
    <link href="css/menu.css" rel="stylesheet" asp-append-version="true"/>
    <link href="css/header.css" rel="stylesheet" asp-append-version="true"/>

    <link rel="stylesheet" href="css/dx-demo.css" asp-append-version="true">
    <link rel="stylesheet" href="css/dx-demo-pages.css" asp-append-version="true">

    <link href="LouisHowe.web.styles.css" rel="stylesheet"/>
    <link rel="icon" type="image/png" href="favicon.png"/>
    <script src="~/js/Interop.js"></script>
    <component type="typeof(HeadOutlet)" render-mode="Server"/>
</head>
<body>
    @{
        var initialTokenState = new Services.InitialApplicationState
            {
                XsrfToken = Xsrf.GetAndStoreTokens(HttpContext).RequestToken,
                Cookie = HttpContext.Request.Cookies[".AspNetCore.Cookies"]
            };
    }

    <component type="typeof(App)" render-mode="Server" param-InitialState="initialTokenState" />

    <div id="blazor-error-ui">
        <environment include="Staging,Production">
            An error has occurred. This application may no longer respond until reloaded.
        </environment>
        <environment include="Development">
            An unhandled exception has occurred. See browser dev tools for details.
        </environment>
        <a href="" class="reload">Reload</a>
        <a class="dismiss">🗙</a>
    </div>

    <script src="_framework/blazor.server.js"></script>
</body>
</html>

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