Blazor 交互模式 (Server/WASM) 设置方法

来源:这里教程网 时间:2026-02-21 17:35:57 作者:

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
和组件标记中设置:

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 压缩、懒加载程序集(
<publishtrimmed>true</publishtrimmed>
)、预加载关键资源
认证与状态:Server 可直接使用 Cookie 认证;WASM 需通过 API Token(如 JWT)并自行管理本地 token 存储与刷新逻辑

基本上就这些。选对初始模板最省事,混合渲染是渐进升级的好工具,但别指望一键切换底层模型——Server 和 WASM 是两套不同的执行契约。

相关推荐