Blazor 服务器端与 Blazor WebAssembly 托管的比较

39

我刚接触Blazor,正在努力理解不同的托管模型之间的差异。

根据我读到的内容,我了解到Blazor服务器端和Blazor WebAssembly托管都有服务器端代码,两者都使用Signal R与客户端通信。

那么它们之间有什么区别?它们的客户端部分部署在哪里?它们与服务器的连接有何不同?如果Web应用程序调用第三方Web API,调用路由是如何处理的?

我发现的一个区别在于项目结构。Blazor服务器端只有一个项目(带有Data文件夹)。而Blazor WebAssembly托管有3个项目(.Server、.Client和.Shared)。


1
这个回答解决了你的问题吗?如何在Blazor中判断代码是在客户端还是服务器上运行? - Quango
1
该链接展示了wasm(独立)和服务器端之间的区别。但我正在寻找WASM(托管)和服务器端的区别。 - Newbie
WASM表示代码在客户端上运行。服务器意味着代码在ASP.NET服务器上运行。WASM客户端可以放置在静态文件服务器上,没有使用ASP.NET的要求。_ASP.NET Hosted WASM_将ASP.NET用作主机。它将WASM客户端作为文件提供,然后在客户端上运行。但它还可以托管其他东西,比如Web API等。 - Quango
1
那是否意味着,ASP.NET 主机在初始加载时将客户端代码部署到设备上?如果客户端代码从第三方 API 获取数据,调用是否通过服务器进行?还是直接从客户端(设备)到第三方 API 进行调用(就像 WASN 独立版的情况)? - Newbie
1
“both uses Signal R” 是不正确的。 - H H
这可能会有所帮助:https://blazor-university.com/overview/blazor-hosting-models/ - 有两种模型:WASM和Server。ASP.NET Hosted WASM与ASP.NET Hosted的唯一区别在于使用ASP.NET将代码发送到客户端。如果您正在使用第三方API,则不需要ASP.NET。您可以将Blazor WASM托管在任何可以提供静态文件的Web服务器上,甚至是GitHub页面 - Quango
2个回答

60
主要的区别在于你的.NET代码运行的位置:使用Blazor Server,它是100%服务器端;而使用托管的Blazor WASM应用程序,则.NET代码在服务器和客户端上都运行(尽管服务器也可以运行任何其他语言或框架)。
据我所读,我了解到Blazor服务器端和Blazor WebAssembly Hosted都有服务器端代码,但它们看起来不同。
- Blazor Server应用程序的.NET运行时是100%服务器端的。客户端使用框架JS库与服务器通信,但归根结底,您将获得一个.NET应用程序。 - 对于Blazor WASM,您的客户端在浏览器中运行单独的.NET运行时。除了客户端WASM应用程序外,托管模型还会生成一个.NET Web API服务器项目;但是,您可以使用任何后端技术来提供和增强您的客户端应用程序(例如Node.JS上的Express),因为您的客户端是服务器技术无关的。
并非总是如此。Blazor Server需要Signal R来持续通信和更新客户端,但Blazor WASM更加灵活。从docs中可以看出:
托管的客户端应用程序可以使用各种消息框架和协议(例如Web APIgRPC-webSignalR)通过网络与其后端服务器应用程序进行交互。
同样,Blazor WASM对您的服务器端是不可知的。托管模型为您生成了一个服务器端,但您可以在技术上使用任何您想要的东西。
这些的客户端部署在哪里?
Blazor Server并没有编译客户端:一旦连接到应用程序,它就利用Signal R通过Web套接字(或其他技术,当不可用时)持续向客户端推送更新。

Blazor WASM是客户端:当您编译WASM项目时,类似于运行Webpack针对React应用程序。 Blazor WASM是一种前端技术,因此可以作为静态网页的依赖项提供,也可以通过Web API进行增强和服务,例如使用托管模型。

它们与服务器的连接有什么区别?

再次说明,Blazor Server需要Signal R,而Blazor WASM是技术无关的:它可以使用Signal R,但通常您只需要标准的HTTP协议。

如果Web应用程序调用第三方Web API,该调用如何路由?

这是一个完全不同的问题,但我可以看到混淆。您的WebAPI是完全独立的应用程序;如果它进行外部请求,您的WASM应用程序将毫不知情。


文档提供了以下见解(请注意,这并没有区分WASM的两个模型,但仍然适用):
当使用 Blazor WebAssembly 应用程序进行部署时,如果没有后端 ASP.NET Core 应用程序来提供其文件,则称该应用程序为 独立 Blazor WebAssembly 应用程序。当使用后端应用程序来提供其文件进行部署时,则称该应用程序为 托管 Blazor WebAssembly 应用程序。
Blazor WebAssembly (WASM) 托管模型具有以下几个优点:
  • 应用程序在从服务器下载后没有 .NET 服务器依赖项,因此,如果服务器离线,则应用程序仍然可以正常工作。
  • 充分利用客户端资源和功能。
  • 将工作从服务器卸载到客户端。
  • 无需 ASP.NET Core web 服务器即可托管应用程序。 > - 可以在无服务器部署方案中实现,例如从内容交付网络 (CDN) 提供应用程序。
Blazor WebAssembly 托管模型有以下限制:
  • 应用程序受浏览器能力的限制。
  • 需要强大的客户端硬件和软件 (例如,WebAssembly 支持)。
  • 下载大小更大,应用程序加载时间更长。
与 Blazor Server 相比:
Blazor 服务器托管模型提供了多个优势:
- 下载大小比 Blazor WebAssembly 应用程序明显更小,应用程序加载速度更快。 - 应用程序充分利用服务器功能,包括使用 .NET Core API。 - 在服务器上使用 .NET Core 运行应用程序,因此现有的 .NET 工具(例如调试)可以按预期工作。 - 支持轻量客户端。例如,Blazor Server 应用程序可与不支持 WebAssembly 的浏览器以及资源受限设备配合使用。 - 应用程序的 .NET/C# 代码库(包括应用程序的组件代码)不会提供给客户端。
Blazor Server 托管模型具有以下限制:
- 通常存在较高的延迟。每个用户交互都涉及网络跳跃。 - 没有离线支持。如果客户端连接失败,则应用程序停止工作。 - 扩展具有许多用户的应用程序需要服务器资源来处理多个客户端连接和客户端状态。 - 需要 ASP.NET Core 服务器来提供应用程序。无法进行无服务器部署方案,例如从内容传递网络 (CDN) 提供应用程序。

2
据我所知,每个模型的最佳用例如下:Blazor Server - 嵌入式应用程序,具有本地网络的内部业务应用程序;Blazor WASM - 高性能、仅客户端应用程序(例如 Photoshop);Blazor Hybrid - 用于桌面和移动设备的原生应用程序。 - OzzyTheGiant
2
“在服务器上使用.NET Core来运行应用程序,因此现有的.NET工具(例如调试)可以按预期工作。” - 从我简短地尝试了两者(Blazor WASM和Blazor Server)来看,这是其中一个较大的区别。能够调试问题并在出现错误时获得完整的详细信息几乎是无价之宝。对于我的使用情况中某些类型的异常,在Blazor WASM中很难做到这一点。 - Per Lundberg
服务器端的另一个潜在优势是可以直接与数据库进行通信。您需要使用WebAssembly构建和调用API。对于不需要公开任何内容的内部业务应用程序来说,这是合理的,并且简化了开发过程。 - Norbert Norbertson
WASM项目的客户端浏览器要求是什么?Mac用户可以使用Chrome或Safari吗?还是他们需要安装任何.NET软件? - IsmailS
@IsmailS 这是WASM,所以它可以在任何支持WASM的地方运行。 - Connor Low

5
一个 Blazor Web Assembly 应用程序完全在客户端上运行。没有 SignalR 连接到服务器:请检查服务器的 program 文件。服务器只是托管加载页面和 WASM 代码的平台,并提供应用程序使用的任何 API 控制器。这是一个标准的 DotNetCore Web 应用程序。
任何对第三方的 API 调用都直接从运行 Web Assembly 应用程序的浏览器到第三方 URL。
请参阅我为另一个类似的 Stack Overflow 问题编写的此 gist,但现在找不到了。它描述了 Web Assembly 托管模板中各个部分的内容。https://gist.github.com/ShaunCurtis/0ed8d257dff4d8497b97c88e5b2b30d0

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接