Blazor WASM托管应用预渲染后JS失效及无法退出预渲染模式问题

以下是几个大概率能解决问题的排查方向，按顺序尝试：

1. 检查Host页面的核心配置是否正确 #

打开Server项目的_Host.cshtml（或根页面文件）：

• 确认组件的render-mode为**WebAssemblyPrerendered**，而非单纯的Prerendered，正确写法如下：

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

• 确保blazor.webassembly.js脚本放在组件标签之后加载，顺序错误会导致WASM无法接管预渲染DOM：

<component type="typeof(App)" render-mode="WebAssemblyPrerendered" />
<script src="_framework/blazor.webassembly.js"></script>

2. 验证Server端Program.cs的服务配置 #

检查Server项目的Program.cs，确认正确添加了交互式WebAssembly组件支持：

// 注册服务时需添加交互式WebAssembly组件支持
builder.Services.AddRazorComponents()
    .AddInteractiveWebAssemblyComponents();

// 端点配置必须启用交互式渲染模式
app.MapRazorComponents<App>()
    .AddInteractiveWebAssemblyRenderMode()
    .AddAdditionalAssemblies(typeof(Client._Imports).Assembly);

如果缺少AddInteractiveWebAssemblyRenderMode()，WASM运行时将无法替换预渲染内容，导致页面一直处于预渲染状态。

3. 排查组件内的异常或预渲染冲突 #

• 打开浏览器控制台，查看是否存在未处理的JS或.NET异常——预渲染阶段组件抛出未处理异常会直接打断WASM初始化流程。
• 所有依赖JS的代码（如OnAfterRender中的调用），需确保在WASM接管后执行。可在OnAfterRenderAsync中添加判断逻辑，或对IJSRuntime调用做异常捕获，避免卡死。

4. 确认静态资源加载正常 #

通过浏览器开发者工具的网络面板，检查blazor.webassembly.js、.wasm后缀文件是否均返回200状态码。若任意资源加载失败，WASM运行时无法启动，页面会一直停留在预渲染状态。

5. 清除浏览器缓存测试 #

浏览器缓存旧脚本文件可能导致新的预渲染配置不生效，直接清除缓存或使用隐私窗口测试，排除缓存干扰。

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