.NET 8 Blazor Web App组件内容重复渲染两次，如何修改渲染模式？

嗨，我完全理解你遇到的这个困扰——在.NET 8的Blazor Web App里，用默认的**自动渲染模式（Auto）**时，服务器组件确实会出现两次渲染的情况。这是因为Auto模式默认会先执行一次静态服务器渲染，然后再切换到交互式渲染，所以视觉上看起来内容重复了。之前.NET 6里改_Host.cshtml的方式在.NET 8里确实不适用了，毕竟项目结构做了调整，咱们可以试试下面这些解决方案：

1. 全局统一设置默认渲染模式 #

现在.NET 8的Blazor Web App是通过Program.cs来配置全局渲染模式的，替代了原来_Host.cshtml的作用。你可以打开Program.cs，找到配置Razor组件的部分，调整成明确的交互式服务器渲染模式：

原来的代码可能类似这样：

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

// ...

app.MapRazorComponents<App>()
    .AddInteractiveServerRenderMode()
    .AddInteractiveWebAssemblyRenderMode()
    .AddAdditionalAssemblies(typeof(Counter).Assembly);

修改为全局默认使用InteractiveServer模式：

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

// ...

app.MapRazorComponents<App>()
    .AddInteractiveServerRenderMode(defaultRenderMode: RenderMode.InteractiveServer);

这样整个应用都会默认使用交互式服务器渲染，不会先做静态渲染，自然也就不会出现两次渲染的问题了。

2. 针对单个页面/组件精准配置 #

如果你不想全局修改，只想给特定页面或组件设置，要确保你指定的是非Auto的渲染模式，避免静态渲染+交互式渲染的双重触发：

比如在你的Home页面组件顶部添加：

@page "/"
@rendermode RenderMode.InteractiveServer

另外要注意：如果之前你在App.razor的<Routes>标签上设置了@rendermode，建议先去掉这个全局设置，避免和页面的单独配置冲突，确保页面的渲染模式设置能生效。

3. 排查其他可能的重复渲染原因 #

有时候两次渲染可能不是渲染模式的锅，你可以排查下：

• 组件的OnInitializedAsync或OnParametersSetAsync方法里有没有重复执行的逻辑？
• 布局组件或者父组件有没有被多次引用？
• 可以在组件的OnAfterRenderAsync方法里加个简单的输出（比如Console.WriteLine("组件渲染了")），确认是不是真的触发了两次渲染，再针对性解决。

备注：内容来源于stack exchange，提问作者geoCode