Blazor prerendering刷新页面布局不显示如何正确配置

不需要将Client项目的App.razor迁移至Server项目，刷新时布局容器无法加载，本质是预渲染阶段未正确挂载根组件、或依赖项缺失导致路由渲染中断，按以下步骤配置即可正常加载布局：

• 第一步：修正_Host.cshtml的根组件挂载配置
  首先确保Server项目已添加Client项目的项目引用，在_Host.cshtml顶部引入Client项目命名空间，在应用渲染位置正确挂载App根组件，不要在Server侧重复编写Router、路由匹配逻辑：

  @using 你的Client项目根命名空间
  
  @* 其他HTML头部内容 *@
  
  <div id="app">
      <component type="typeof(App)" render-mode="WebAssemblyPrerendered" />
  </div>
  
  @* 原有Blazor WASM脚本引用保留 *@
  <script src="_framework/blazor.webassembly.js"></script>
  

  注意render-mode必须设置为WebAssemblyPrerendered，该模式会先在服务端完成App组件（含Router路由匹配、MainLayout布局、页面内容）的静态渲染，WASM资源加载完成后自动激活交互，不会出现刷新时布局丢失的问题。

• 第二步：确保布局与页面组件可被服务端解析
  你App.razor中引用的MainLayout、MudAlert等所有组件，不要只放在Server项目中，需统一放在Client项目内：预渲染阶段服务端会直接加载Client项目的App组件，连带解析其所有依赖的组件、布局，只要组件存在于Client项目程序集内，服务端可直接识别，无需重复迁移。

• 第三步：补齐预渲染阶段的服务依赖
  你在App.razor中使用了Fluxor状态管理，预渲染时服务端也需要注册对应服务，否则Store初始化失败会中断组件渲染，导致布局无法输出：

  1. 给Server项目安装和Client项目版本完全一致的Fluxor.Blazor.Web Nuget包
  2. 在Server项目的Program.cs中添加Fluxor服务注册，和Client侧配置保持一致：

     builder.Services.AddFluxor(options =>
     {
         // 扫描Client项目程序集加载Store、Reducer、Effect
         options.ScanAssemblies(typeof(Client项目.App).Assembly);
     });
     

  如果你用了MudBlazor等第三方组件库，Server项目也要同步注册对应服务（比如builder.Services.AddMudServices();），否则MudAlert这类组件无法解析，同样会导致整个App组件渲染失败。

• 常见排查点
  如果配置完还是不显示，打开浏览器查看预渲染返回的HTML源码，搜索是否有500错误的提示信息，通常都是某类组件服务未在Server侧注册、或者命名空间引用错误导致渲染中断，按报错信息补齐依赖即可。

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