Blazor Server应用初始化时显示加载HTML

Blazor Server首次加载时的白屏，根源是组件渲染依赖SignalR连接建立、框架初始化及安全检查，这些流程完成前Blazor组件（包括App.razor里的内容）不会被渲染。要实现页面刚加载就显示加载内容，必须将加载逻辑放在静态HTML入口文件中，而非Blazor组件内。

具体实现步骤 #

1. 修改_Host.cshtml（Blazor Server的入口页面）
   在Blazor挂载容器（默认是<div id="app">）中直接编写静态加载内容，浏览器加载页面后会立刻渲染这些内容，无需等待Blazor框架就绪：

   <div id="app">
       <div class="loading-wrapper">
           <div class="loading-spinner"></div>
           <p>应用加载中，请稍候...</p>
       </div>
   </div>
   

2. 添加加载样式
   在_Host.cshtml的<head>标签内或全局CSS文件中，添加加载动画的样式，让提示更直观：

   .loading-wrapper {
       position: fixed;
       top: 0;
       left: 0;
       width: 100%;
       height: 100vh;
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
       background-color: #ffffff;
       z-index: 9999;
   }
   
   .loading-spinner {
       width: 60px;
       height: 60px;
       border: 6px solid #e0e0e0;
       border-top-color: #2196f3;
       border-radius: 50%;
       animation: spin 1.2s linear infinite;
   }
   
   @keyframes spin {
       to { transform: rotate(360deg); }
   }
   

3. 自动替换加载内容
   当Blazor框架初始化完成并建立SignalR连接后，会自动清空<div id="app">内的静态内容，渲染App.razor及后续组件，无需额外编写JS逻辑。

额外优化建议 #

• 如果安全检查（如身份验证）是主要耗时环节，可以在静态加载内容中针对性提示，比如<p>正在验证身份...</p>，让用户感知更清晰。
• 避免在静态加载内容中引入Blazor组件或依赖Blazor运行时的JS，保持内容极简，确保浏览器最快解析显示。

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