ASP.NET Core服务端Blazor按用户ID在_Host.cshtml动态引入CSS

• _Host.cshtml是服务端生成首次HTML响应时执行的Razor模板，对应Blazor的预渲染流程：此时和客户端的SignalR长连接尚未建立，浏览器端的LocalStorage、SessionStorage完全无法被服务端访问。
• Protected Browser Storage的读写逻辑本质是依赖浏览器端JS互操作完成的加密存储操作，服务端预渲染阶段没有可用的JS执行环境，直接在_Host.cshtml里调用GetAsync读取存储值，既拿不到真实数据，还会直接触发JS互操作异常导致页面启动失败，这是之前添加条件分支提前判断后项目无法正常运行的核心原因。

方案1：Blazor组件内动态加载CSS（标准实现，无侵入） #

这个方案完全不需要修改_Host.cshtml的原有渲染逻辑，直接在Blazor组件生命周期内完成存储读取和CSS加载：

1. 在根组件App.razor中注入所需服务，在可正常执行JS互操作的OnInitializedAsync生命周期中读取用户ID：

   // 依赖注入
   [Inject] private ProtectedLocalStorage BrowserStorage { get; set; } = default!;
   [Inject] private IJSRuntime JS { get; set; } = default!;
   
   protected override async Task OnInitializedAsync()
   {
       int? userId = null;
       try
       {
           var storageResult = await BrowserStorage.GetAsync<int>("user");
           if (storageResult.Success)
           {
               userId = storageResult.Value;
           }
       }
       catch (JSException)
       {
           // 兼容预渲染阶段JS不可用场景，直接走默认样式分支
       }
   
       // 匹配对应CSS路径，兜底走原有默认样式
       string cssPath = userId switch
       {
           1 => "css/site1.css",
           2 => "css/site2.css",
           _ => "css/tenantA/site.css"
       };
   
       // 动态插入CSS引用
       await JS.InvokeVoidAsync("loadCustomCss", cssPath);
   }
   

2. 把动态加载CSS的JS辅助逻辑直接写到_Host.cshtml现有的script标签块中，不需要引入外部JS文件：

   window.loadCustomCss = function(cssPath) {
       const styleLink = document.createElement('link');
       styleLink.rel = 'stylesheet';
       styleLink.href = cssPath;
       document.head.appendChild(styleLink);
   }
   

3. 移除_Host.cshtml中硬编码的默认CSS引用即可，动态加载过程会在Blazor服务端建立连接后的极短时间内执行，无明显样式闪烁。

方案2：认证Cookie映射用户ID（适合零闪屏强需求场景） #

如果要求首次HTML响应加载时就带入对应CSS，完全避免样式切换闪烁，可以调整用户ID的存储链路：

• 用户登录成功、往Protected Browser Storage写入user_id的同时，生成包含user_id Claim的服务端认证Cookie，让user_id同时存在于服务端可读取的请求上下文中。
• 此时_Host.cshtml可以直接从HttpContext的用户Claims中读取user_id值，完全不需要调用浏览器存储接口，直接在head标签内做条件判断输出对应CSS链接，整个过程都是服务端原生Razor渲染，无异步操作、无JS依赖，不会触发预渲染异常。
• 这个链路下Protected Browser Storage仅作为客户端侧的本地缓存使用，服务端逻辑以请求携带的Cookie Claim值为准，从机制上解决了服务端无法访问客户端存储的限制。

• 不要在_Host.cshtml的预渲染逻辑中直接调用任何依赖浏览器JS环境的能力，包括Protected Browser Storage、IJSRuntime相关操作，这类操作仅在SignalR连接建立、Blazor开始正常交互的阶段可以稳定运行。
• 如果项目当前配置的是RenderMode.ServerPrerendered（预渲染模式），需要在读取浏览器存储的代码块中增加异常捕获，避免预渲染阶段JS不可用触发未捕获异常导致页面白屏；若对预渲染无强需求，可以直接把RenderComponentAsync的参数改为RenderMode.Server（关闭预渲染），减少这类兼容性问题。

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