如何在Blazor WASM托管项目中混合使用WASM与Server页面？

需求概述 #

我需要在应用中针对不同场景灵活选用Blazor运行模式：

• Blazor Server：用于高安全或涉及知识产权保护的页面，确保核心逻辑仅在服务器端执行，不暴露给客户端
• Blazor WASM：用于需要减轻服务器负载、提升前端响应速度的页面，利用客户端资源处理业务

技术选型与痛点 #

计划基于Blazor WASM托管项目结构开发：

• Client项目：承载WASM模式的页面
• Server项目：承载Server模式的页面

但实际落地时遇到了难题，未找到针对性的教程：

• 微软官方文档仅覆盖单解决方案内托管多个WASM项目的场景，未提及如何在Server项目中托管Blazor Server组件
• 现有文档说明Server项目可作为Razor Pages或MVC应用提供页面/视图，但我需要Server项目同时能提供Blazor组件

我的实现方法 #

1. 配置Server项目的Blazor Server服务

   • 在Server项目的Program.cs中添加Blazor Server服务注册：

     builder.Services.AddServerSideBlazor();
     

   • 在端点配置中添加Blazor Hub映射：

     app.MapBlazorHub();
     

2. 在Server项目中创建Blazor组件与页面

   • 在Server项目中新建Pages文件夹，添加Blazor Server页面（如SecurePage.razor）
   • 若需要将Blazor组件嵌入到Razor Page中，可使用Component.InvokeAsync方法：

     @page "/secure-page"
     @using Microsoft.AspNetCore.Components
     
     <h1>安全页面（Server模式）</h1>
     @await Component.InvokeAsync<SecureComponent>()
     

3. 路由隔离与导航配置

   • 为WASM和Server模式的页面设置不冲突的路由规则，例如WASM页面使用/client/*前缀，Server页面使用/secure/*前缀
   • 在Shared项目中创建导航菜单组件，根据路由区分跳转至对应模式的页面

4. 共享组件与资源

   • 将通用的UI组件、工具类放在Shared项目中，供Client和Server项目共同引用，确保样式和逻辑一致性

寻求替代方案与思路 #

欢迎大家分享其他实现混合Blazor模式的思路，比如：

• 是否有更简洁的路由配置方式？
• 如何优化两种模式之间的状态同步？
• 有没有成熟的架构方案可以参考？

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