Blazor提供Server和WebAssembly两种交互模式,创建项目时需通过模板选定;Server依赖SignalR服务端执行,WASM在浏览器中运行.NET运行时;迁移需手动重构项目结构与配置,.NET 8+支持混合渲染模式按组件指定交互方式。

Blazor 提供两种主流交互模式:Server(服务端渲染)和 WebAssembly(客户端运行),选择和配置方式取决于部署环境与应用需求。关键不是“切换模式”,而是创建项目时选定模板,后续可通过修改配置迁移,但需注意运行机制差异带来的限制。
创建新项目时直接选择模式
使用 .NET CLI 或 Visual Studio 创建 Blazor 项目时,模板决定了初始模式:
-
Blazor Server:执行
dotnet new blazorserver -n MyApp,默认启用 SignalR 实时连接,页面逻辑在服务器执行,浏览器只负责 UI 渲染和事件转发 -
Blazor WebAssembly:执行
dotnet new blazorwasm -n MyApp,生成独立的前端应用,.NET 运行时通过 WebAssembly 在浏览器中运行,可托管在任意静态文件服务器上 - 带 ASP.NET Core Hosted 的 WASM(即“托管式 WASM”):加
--hosted参数,如dotnet new blazorwasm --hosted -n MySolution,会生成包含 API 后端的完整解决方案,适合需要后端 API 支持的离线优先场景
现有项目切换模式需重配,非简单开关
Blazor Server 和 WASM 项目结构、依赖项、启动逻辑不同,无法通过改一个配置项切换。迁移需手动操作:
- 将 Server 项目改为 WASM:需新建 WASM 项目,把
Shared/和Pages/等业务代码迁移过去;替换Program.cs中的AddServerSideBlazor()为AddWasmRenderMode()(.NET 8+)或AddBlazorWebAssemblyHostedService();移除 SignalR 相关引用和_Host.cshtml - 将 WASM 改为 Server:需新建 Server 项目,迁移组件;修改
Program.cs使用AddServerSideBlazor();将index.html替换为_Host.cshtml;删除wwwroot/_framework/相关发布逻辑 - 注意:HTTP 客户端调用(如
HttpClient)、状态管理、认证方式(如 JWT vs Cookie)、静态资源路径等均需同步调整
.NET 8+ 中统一渲染模式(Auto/Interactive)的配置
.NET 8 引入了“混合渲染”能力,允许同一应用中按需指定组件渲染方式(Server、WASM 或 Auto)。关键在 _Imports.razor 和组件标记中设置:
1、数据调用该功能使界面与程序分离实施变得更加容易,美工无需任何编程基础即可完成数据调用操作。2、交互设计该功能可以方便的为栏目提供个性化性息功能及交互功能,为产品栏目添加产品颜色尺寸等属性或简单的留言和订单功能无需另外开发模块。3、静态生成触发式静态生成。4、友好URL设置网页路径变得更加友好5、多语言设计1)UTF8国际编码; 2)理论上可以承担一个任意多语言的网站版本。6、缓存机制减轻服务器
- 在
Program.cs中注册交互式渲染器:builder.Services.AddRendering();
并为不同模式添加服务(如AddInteractiveServerComponents()和AddInteractiveWebAssemblyComponents()) - 在组件顶部添加渲染指令:
@rendermode InteractiveServer或@rendermode InteractiveWebAssembly
或使用自动降级:@rendermode InteractiveAuto(先尝试 WASM,失败则回退 Server) - 确保
_Host.cshtml(Server)或index.html(WASM)正确加载对应 JS 初始化脚本(如blazor.server.js或blazor.webassembly.js)
部署与运行时注意事项
模式决定部署方式和运行约束:
- Server 模式:必须部署在支持 WebSocket/Long Polling 的服务器(如 IIS、Kestrel、Nginx 配合 proxy_pass),需维持用户会话连接,不适用于高延迟或弱网环境
-
WASM 模式:部署为纯静态文件(HTML/JS/WASM),但首次加载体积较大(约 2–5 MB),建议启用 Brotli 压缩、懒加载程序集(
)、预加载关键资源true - 认证与状态:Server 可直接使用 Cookie 认证;WASM 需通过 API Token(如 JWT)并自行管理本地 token 存储与刷新逻辑
基本上就这些。选对初始模板最省事,混合渲染是渐进升级的好工具,但别指望一键切换底层模型——Server 和 WASM 是两套不同的执行契约。









