.NET 8 Blazor SSR模式下如何在首次渲染执行JS互操作？

1. 直接嵌<script>标签（最简单的原生方案） #

静态SSR组件没法用OnAfterRender，但可以直接在组件渲染的HTML里插内嵌<script>，浏览器加载完页面就会自动执行里面的代码，完全绕开Blazor的生命周期限制，适合那种不跟Blazor交互、纯初始化的JS逻辑。

代码示例：

@* 你的静态SSR布局组件 *@
<div class="layout-wrapper">
    @Body
</div>

@{
    <script>
        // 这里写你的初始化逻辑，比如初始化全局UI组件、配置主题
        initSiteLayout();
    </script>
}

要是需要把Blazor渲染的数据传给JS，直接在脚本里插值就行，比如@Model.Theme，服务器渲染时会自动替换成实际值。

2. 拆分布局：静态部分+独立交互式组件 #

如果你的JS逻辑后续还要跟Blazor交互，别把整个布局改成交互式，只把需要JS互操作的部分拆成单独的交互式组件（用@rendermode InteractiveServer或InteractiveWebAssembly），剩下的布局保持静态SSR。这样既满足布局静态的需求，又能执行JS互操作，还不会连累子组件变交互式。

示例结构：

@* 静态SSR布局主体 *@
<header class="static-header">
    <!-- 纯静态内容，不用JS -->
</header>

<!-- 只有这个组件是交互式的，专门处理JS初始化 -->
<LayoutJsInit @rendermode="InteractiveServer" InitData="@LayoutSetupData" />

<main class="layout-body">
    @Body
</main>

@code {
    private LayoutSetupData LayoutSetupData { get; set; } = new();

    protected override void OnInitialized()
    {
        // 准备要传给JS的初始化数据
        LayoutSetupData.Theme = "dark";
        LayoutSetupData.MenuItems = GetMenuItems();
    }
}

交互式组件LayoutJsInit.razor：

@inject IJSRuntime JSRuntime

@code {
    [Parameter] public LayoutSetupData InitData { get; set; }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            // 执行JS互操作，把数据传过去
            await JSRuntime.InvokeVoidAsync("initLayout", InitData);
        }
    }
}

3. 全局脚本注入（适合全局初始化） #

如果你的JS是全局的网站初始化逻辑，直接在_Host.cshtml（或者_Layout.cshtml）里加脚本就行，不用跟组件绑定。利用浏览器的DOMContentLoaded事件，等页面渲染完再执行。

示例（在_Host.cshtml里）：

<body>
    <component type="typeof(App)" render-mode="Static" />

    <script src="_framework/blazor.web.js"></script>
    <script>
        window.addEventListener('DOMContentLoaded', () => {
            // 这里跑全局初始化代码
            initWholeSite();
        });
    </script>
</body>

4. 静态组件里尝试OnAfterRenderAsync（需注意兼容性） #

.NET 8对静态SSR组件有一些增强，但纯静态模式下OnAfterRenderAsync默认不会触发，而且IJSRuntime可能没初始化。如果一定要用这个方法，得加个异常捕获，失败了就 fallback 到内嵌脚本的方案：

@inject IJSRuntime JSRuntime

<div class="layout-container">
    @Body
</div>

@code {
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            try
            {
                await JSRuntime.InvokeVoidAsync("initLayout");
            }
            catch (InvalidOperationException)
            {
                // 静态模式下JS运行时不可用，这里可以留空或者用其他方式处理
            }
        }
    }
}

不过这个方案不太稳定，优先推荐前面三种。

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