0

0

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

月夜之吻

月夜之吻

发布时间:2025-12-29 12:28:59

|

987人浏览过

|

来源于php中文网

原创

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

blazor 交互模式 (server/wasm) 设置方法

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

SUN2008 企业网站管理系统2.0 beta
SUN2008 企业网站管理系统2.0 beta

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.jsblazor.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 是两套不同的执行契约。

相关专题

更多
nginx 重启
nginx 重启

nginx重启对于网站的运维来说是非常重要的,根据不同的需求,可以选择简单重启、平滑重启或定时重启等方式。本专题为大家提供nginx重启的相关的文章、下载、课程内容,供大家免费下载体验。

227

2023.07.27

nginx 配置详解
nginx 配置详解

Nginx的配置是指设置和调整Nginx服务器的行为和功能的过程。通过配置文件,可以定义虚拟主机、HTTP请求处理、反向代理、缓存和负载均衡等功能。Nginx的配置语法简洁而强大,允许管理员根据自己的需要进行灵活的调整。php中文网给大家带来了相关的教程以及文章,欢迎大家前来学习阅读。

490

2023.08.04

nginx配置详解
nginx配置详解

NGINX与其他服务类似,因为它具有以特定格式编写的基于文本的配置文件。本专题为大家提供nginx配置相关的文章,大家可以免费学习。

496

2023.08.04

tomcat和nginx有哪些区别
tomcat和nginx有哪些区别

tomcat和nginx的区别:1、应用领域;2、性能;3、功能;4、配置;5、安全性;6、扩展性;7、部署复杂性;8、社区支持;9、成本;10、日志管理。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

220

2024.02.23

nginx报404怎么解决
nginx报404怎么解决

当访问 nginx 网页服务器时遇到 404 错误,表明服务器无法找到请求资源,可以通过以下步骤解决:1. 检查文件是否存在且路径正确;2. 检查文件权限并更改为 644 或 755;3. 检查 nginx 配置,确保根目录设置正确、没有冲突配置等等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

328

2024.07.09

Nginx报404错误解决方法
Nginx报404错误解决方法

解决方法:只需要加上这段配置:try_files $uri $uri/ /index.html;即可。想了解更多Nginx的相关内容,可以阅读本专题下面的文章。

3505

2024.08.07

html版权符号
html版权符号

html版权符号是“©”,可以在html源文件中直接输入或者从word中复制粘贴过来,php中文网还为大家带来html的相关下载资源、相关课程以及相关文章等内容,供大家免费下载使用。

591

2023.06.14

html在线编辑器
html在线编辑器

html在线编辑器是用于在线编辑的工具,编辑的内容是基于HTML的文档。它经常被应用于留言板留言、论坛发贴、Blog编写日志或等需要用户输入普通HTML的地方,是Web应用的常用模块之一。php中文网为大家带来了html在线编辑器的相关教程、以及相关文章等内容,供大家免费下载使用。

637

2023.06.21

ip地址修改教程大全
ip地址修改教程大全

本专题整合了ip地址修改教程大全,阅读下面的文章自行寻找合适的解决教程。

121

2025.12.26

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Bootstrap 5教程
Bootstrap 5教程

共46课时 | 2.7万人学习

AngularJS教程
AngularJS教程

共24课时 | 2.1万人学习

CSS教程
CSS教程

共754课时 | 17万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号