Blazor Server 与 WASM 混合部署模式教程

Blazor Server与Blazor WASM混合部署可兼顾首屏速度、离线能力与服务端实时性，关键在于按场景拆分路由并用反向代理智能分发：/admin/走Server实现实时监控与权限敏感操作，/docs/、/app/*走WASM支持离线访问与PWA，共享.NET Standard类库与统一API鉴权，Nginx配置路由转发与静态资源托管。

Blazor Server 和 Blazor WASM 并非互斥方案，混合部署能兼顾首屏速度、离线能力与服务端实时性——关键在于按场景拆分路由，用反向代理做智能分发。

明确各自适用场景

Blazor Server 适合需要高实时性、强服务端依赖、低客户端算力要求的页面，比如后台管理中的实时监控看板、权限敏感的数据录入表单；Blazor WASM 更适合静态内容多、需离线访问、SEO 友好或跨平台 PWA 场景，例如帮助中心、产品介绍页、用户自助仪表盘（含本地缓存逻辑）。

路由级分离：前端决定加载模式

不推荐在同一个项目里混用两种渲染模型，而是将应用按功能域拆成两个独立项目（BlazorServerApp 和 BlazorWasmApp），再通过统一入口（如 ASP.NET Core Hosted 网站）协调。核心是让浏览器首次请求时就命中对应宿主：

• /admin/* → 反向代理转发到 Blazor Server 应用（SignalR 连接保持）
• /docs/*、/app/* → 静态托管 Blazor WASM 的 _framework/ 资源，由 Nginx 或 CDN 直接返回
• 根路径 / 可设为重定向页或轻量门户页，用 JavaScript 检测网络/设备后跳转最优入口

共享代码与状态协同

共用类库（.NET Standard 2.1+）存放模型、服务接口、验证逻辑和可复用组件（注意：WASM 不支持部分 System.* API，如文件 IO、线程池）。状态同步靠后端统一 API 中心：

标签： javascript java html 前端 nginx cookie seo 浏览器 app 后端 proxy 路由