ASP.NET Core Blazor 托管模型

本文介绍不同的 Blazor 托管模型,以及如何选择要使用的模型。

Blazor 是一个 Web 框架,用于生成可通过不同方式托管的 Web UI 组件(Razor 组件)。 Razor 组件可以在 ASP.NET Core (Blazor Server) 中运行服务器端,并在浏览器中使用基于 WebAssembly 的 .NET 运行时(Blazor WebAssembly、Blazor WASM)运行客户端。 还可以在本机移动应用和桌面应用中托管 Razor 组件,将其呈现到嵌入式 Web View 控件 (Blazor Hybrid)。 无论采用哪种托管模式,生成 Razor 组件的方式都是相同的。 相同的 Razor 组件可以在任何托管模型下使用,没有任何变化。

Blazor 是一个 Web 框架,用于生成可通过不同方式托管的 Web UI 组件(Razor 组件)。 Razor 组件可以在 ASP.NET Core (Blazor Server) 中运行服务器端,并在浏览器中使用基于 WebAssembly 的 .NET 运行时(Blazor WebAssembly、Blazor WASM)运行客户端。 无论采用哪种托管模式,生成 Razor 组件的方式都是相同的。 相同的 Razor 组件可以在任何托管模型下使用,没有任何变化。

Blazor Server

使用 Blazor Server 托管模型可从 ASP.NET Core 应用中在服务器上执行应用。 UI 更新、事件处理和 JavaScript 调用是通过 SignalR 连接使用 WebSocket 协议进行处理。 服务器上与每个连接的客户端相关联的状态被称为线路。 线路不绑定到特定网络连接,可以承受短暂的网络中断,允许客户端在连接丢失时尝试重新连接到服务器。

在传统的服务器呈现应用中,在多个浏览器屏幕(选项卡或 iframes)中打开同一应用通常不会对服务器产生额外的资源需求。 在 Blazor Server 应用中,每个浏览器屏幕都需要单独的线路和单独的服务器托管组件状态实例。 Blazor 将关闭浏览器标签页或访问外部 URL 视为正常终止。 如果正常终止,则会立即释放线路和关联的资源。 例如,由于网络中断,客户端也可能异常地断开连接。 Blazor Server 会将断开连接的路线存储一段时间(可配置),以便客户端重新连接。

浏览器通过 SignalR 连接与服务器上的应用进行交互(该应用托管在 ASP.NET Core 应用内部)。

在客户端上,Blazor 脚本 (blazor.server.js) 与服务器建立 SignalR 连接。 脚本由 ASP.NET Core 共享框架中的嵌入资源提供给客户端应用。 客户端应用负责根据需要保持和还原应用状态。

Blazor Server 托管模型具有以下优点:

  • 下载项大小明显小于 Blazor WebAssembly 应用,且应用加载速度快得多。
  • 应用可以充分利用服务器功能,包括对 .NET Core API 的使用。
  • 服务器上的 .NET Core 用于运行应用,因此调试等现有 .NET 工具可按预期正常工作。
  • 支持瘦客户端。 例如,Blazor Server 应用适用于不支持 WebAssembly 的浏览器以及资源受限的设备。
  • 应用的 .NET/C# 代码库(其中包括应用的组件代码)不适用于客户端。

Blazor Server 托管模型具有以下局限性:

  • 通常延迟较高。 每次用户交互都涉及到网络跃点。
  • 不支持脱机工作。 如果客户端连接失败,应用会停止工作。
  • 若要缩放具有许多用户的应用,需要使用服务器资源处理多个客户端连接和客户端状态。
  • 需要 ASP.NET Core 服务器为应用提供服务。 无服务器部署方案不可行,例如通过内容分发网络 (CDN) 为应用提供服务的方案。

我们建议将 Azure SignalR 服务用于 Blazor Server 应用。 该服务允许将 Blazor Server 应用扩展到大量并发 SignalR 连接。

Blazor WebAssembly

Blazor WebAssembly (WASM) 应用在浏览器中使用基于 WebAssembly 的 .NET 运行时来运行客户端。 将 Blazor 应用、其依赖项以及 .NET 运行时下载到浏览器。 应用将在浏览器线程中直接执行。 UI 更新和事件处理在同一进程中进行。 应用资产作为静态文件部署到可为客户端提供静态内容的 Web 服务器或服务中。

Blazor WebAssembly:Blazor 应用在浏览器内部的 UI 线程上运行。

如果创建了 Blazor WebAssembly 应用进行部署,但没有后端 ASP.NET Core 应用来为其文件提供服务,那么该应用被称为独立 Blazor WebAssembly 应用。 如果创建了应用进行部署,但没有后端应用来为其文件提供服务,那么该应用被称为托管的 Blazor WebAssembly 应用。

构建为渐进式 Web 应用 (PWA) 的 Blazor WebAssembly 应用使用新式浏览器 API 启用本机客户端应用的许多功能,例如脱机工作、在其自己的应用窗口中运行、从主机的操作系统启动、接收推送通知以及在后台自动更新。

使用托管的 Blazor WebAssembly,可以通过 .NET 获得完整堆栈 Web 开发体验,包括能够在客户端和服务器应用之间共享代码、支持预呈现以及与 MVC 和 Razor Pages 集成。 托管客户端应用可以使用各种消息传递框架和协议(例如 Web APIgRPC-WebSignalR结合使用 ASP.NET Core SignalR 和 Blazor))通过网络与其后端服务器应用进行交互。

blazor.webassembly.js 脚本由框架和句柄提供:

  • 下载 .NET 运行时、应用和应用依赖项。
  • 初始化运行应用的运行时。

Blazor WebAssembly (WASM) 托管模型具有以下优点:

  • 从服务器下载应用后,没有 .NET 服务器端依赖项,因此,如果服务器脱机,应用将保持正常运行。
  • 可充分利用客户端资源和功能。
  • 工作可从服务器转移到客户端。
  • 无需 ASP.NET Core Web 服务器即可托管应用。 无服务器部署方案可行,例如通过内容分发网络 (CDN) 为应用提供服务的方案。

Blazor WebAssembly 托管模型具有以下局限性:

  • 应用仅可使用浏览器功能。
  • 需要可用的客户端硬件和软件(例如 WebAssembly 支持)。
  • 下载项大小较大,应用加载耗时较长。

Blazor WebAssembly 支持预先 (AOT) 编译,你可以直接将 .NET 代码编译到 WebAssembly 中。 AOT 编译会提高运行时性能,代价是应用大小增加。 有关详细信息,请参阅托管和部署 ASP.NET Core Blazor WebAssembly

用于 AOT 编译的相同 .NET WebAssembly 生成工具也会重新链接 .NET WebAssembly 运行时,以剪裁未使用的运行时代码。

Blazor WebAssembly 支持剪裁 .NET Core 框架库中未使用的代码。 有关详细信息,请参阅 ASP.NET Core Blazor 全球化和本地化。 .NET 编译器进一步预压缩 Blazor WebAssembly 应用,以达到更小的应用有效负载。

Blazor WebAssembly 应用可以使用生成的本机依赖项在 WebAssembly 上运行。

Blazor WebAssembly 支持剪裁 .NET Core 框架库中未使用的代码。 有关详细信息,请参阅 ASP.NET Core Blazor 全球化和本地化

Blazor Hybrid

Blazor 还可用于使用混合方法生成本机客户端应用。 混合应用是利用 Web 技术实现其功能的本机应用。 在 Blazor Hybrid 应用中,Razor 组件与任何其他 .NET 代码一起直接在本机应用中(而不在 WebAssembly 上)运行,并通过本地互操作通道基于 HTML 和 CSS 将 Web UI 呈现到嵌入式 Web View 控件。

具有 .NET 和 Blazor 的混合应用在 Web View 控件中呈现 UI,其中 HTML 文档对象模型 (DOM) 与本机桌面或移动应用的 Blazor 和 .NET 交互。

可以使用不同的 .NET 本机应用框架(包括 .NET MAUI、WPF 和 Windows 窗体)生成 Blazor Hybrid 应用。 Blazor 提供 BlazorWebView 控件,将 Razor 组件添加到使用这些框架生成的应用。 通过结合使用 Blazor 和 .NET MAUI,可以便捷地生成适用于移动和桌面的跨平台 Blazor Hybrid 应用,而将 Blazor 与 WPF 和 Windows 窗体集成可以更好地实现现有应用的现代化。

由于 Blazor Hybrid 应用是本机应用,它们可以支持只有 Web 平台所没有的功能。 通过正常的 .NET API,Blazor Hybrid 应用对本机平台功能具有完全访问权限。 Blazor Hybrid 应用还可以与现有 Blazor Server 或 Blazor WebAssembly 应用共享和重复使用组件。 Blazor Hybrid 应用结合了 Web、本机应用和 .NET 平台的优点。

Blazor Hybrid 托管模型具有以下优点:

  • 重复使用可在移动、桌面和 Web 之间共享的现有组件。
  • 利用 Web 开发技能、体验和资源。
  • 应用对设备的本机功能具有完全访问权限。

Blazor Hybrid 托管模型具有以下局限性:

  • 必须为每个目标平台生成、部署和维护单独的本机客户端应用。
  • 与在浏览器中访问 Web 应用相比,查找、下载和安装本机客户端应用通常需要更长的时间。

有关详细信息,请参阅 ASP.NET Core

有关 Microsoft 本机客户端框架的详细信息,请参阅以下资源:

应选择哪个 Blazor 托管模型?

根据应用的功能要求选择 Blazor 托管模型。 下表显示了选择托管模型的主要注意事项。

Blazor Hybrid 应用包括 .NET MAUI、WPF 和 Windows 窗体框架应用。

功能 Blazor Server Blazor WebAssembly (WASM) Blazor Hybrid
与 .NET API 完全兼容 ✔️ ✔️
直接访问服务器和网络资源 ✔️ ❌† ❌†
较小的有效负载,较快的初始加载速度 ✔️
接近本机执行速度 ✔️ ✔️‡ ✔️
服务器上安全且专用的应用代码 ✔️ ❌† ❌†
下载后即可脱机运行应用 ✔️ ✔️
静态站点托管 ✔️
将处理过程转移至客户端 ✔️ ✔️
对本机客户端功能具有完全访问权限 ✔️
基于 Web 的部署 ✔️ ✔️

†Blazor WebAssembly 和 Blazor Hybrid 应用可以使用基于服务器的 API 来访问服务器/网络资源并访问专用和安全的应用代码。
‡Blazor WebAssembly 仅通过预先 (AOT) 编译达到接近本机性能。

Feature Blazor Server Blazor WebAssembly (WASM)
与 .NET API 完全兼容 ✔️
直接访问服务器和网络资源 ✔️ ❌†
较小的有效负载,较快的初始加载速度 ✔️
服务器上安全且专用的应用代码 ✔️ ❌†
下载后即可脱机运行应用 ✔️
静态站点托管 ✔️
将处理过程转移至客户端 ✔️

†Blazor WebAssembly 应用可以使用基于服务器的 API 来访问服务器/网络资源并访问专用和安全的应用代码。

选择应用的托管模型后,可以从 Blazor 项目模板生成 Blazor Server 或 Blazor WebAssembly 应用。 有关详细信息,请参阅用于 ASP.NET Core Blazor 的工具

若要创建 Blazor Hybrid 应用,请参阅 ASP.NET Core Blazor Hybrid 教程下的文章。

与 .NET API 完全兼容

Blazor Server 和 Blazor Hybrid 应用与 .NET API 完全兼容,而 Blazor WebAssembly 应用仅与一部分 .NET API 兼容。 如果应用的规范要求使用一个或多个 Blazor WebAssembly 应用不可用的 .NET API,请选择 Blazor Server 或 Blazor Hybrid。

Blazor Server 应用与 .NET API 完全兼容,而 Blazor WebAssembly 应用仅与一部分 .NET API 兼容。 如果应用的规范要求使用一个或多个 Blazor WebAssembly 应用不可用的 .NET API,请选择 Blazor Server。

直接访问服务器和网络资源

Blazor Server 应用可以在应用执行时直接访问服务器和网络资源。 由于 Blazor WebAssembly 和 Blazor Hybrid 应用在客户端上执行,因此它们不能直接访问服务器和网络资源。 Blazor WebAssembly 和 Blazor Hybrid 应用可以通过基于服务器的受保护 API 间接访问服务器和网络资源。 基于服务器的 API 可通过第三方库、包和服务获得。 考虑以下注意事项:

  • 第三方库、包和服务的实现和维护成本可能很高,它们的支持可能较弱,或者可能带来安全风险。
  • 如果组织在内部开发一个或多个基于服务器的 API,则需要额外的资源来构建和维护它们。

若要避免为 Blazor WebAssembly 或 Blazor Hybrid 应用使用基于服务器的 API,请采用 Blazor Server,它可以直接访问服务器和网络资源。

Blazor Server 应用可以在应用执行时直接访问服务器和网络资源。 由于 Blazor WebAssembly 应用在客户端上执行,因此它们不能直接访问服务器和网络资源。 Blazor WebAssembly 应用可以通过基于服务器的受保护 API 间接访问服务器和网络资源。 基于服务器的 API 可通过第三方库、包和服务获得。 考虑以下注意事项:

  • 第三方库、包和服务的实现和维护成本可能很高,它们的支持可能较弱,或者可能带来安全风险。
  • 如果组织在内部开发一个或多个基于服务器的 API,则需要额外的资源来构建和维护它们。

若要避免为 Blazor WebAssembly 应用使用基于服务器的 API,请采用 Blazor Server,它可以直接访问服务器和网络资源。

较小的有效负载,较快的初始加载速度

Blazor Server 应用的有效负载大小相对较小,初始加载时间较短。 如果需要较短的初始加载时间,请采用 Blazor Server。

接近本机执行速度

Blazor Server 应用通常在服务器上快速执行。 但是,Blazor Server 应用通常比在客户端上本机执行的其他类型的应用慢。

Blazor Hybrid 应用在目标平台上以本机方式使用 .NET 运行时运行,可提供最佳速度。

Blazor WebAssembly(包括渐进式 Web 应用 (PWA))应用使用适用于 WebAssembly 的 .NET 运行时运行,这比直接在平台上运行慢,甚至对于在浏览器中为 WebAssembly 预先 (AOT) 编译的应用也是如此。

Blazor WebAssembly 应用使用适用于 WebAssembly 的 .NET 运行时运行,这比直接在平台上运行的速度要慢。

服务器上安全且专用的应用代码

在服务器上安全且私密地维护应用代码是 Blazor Server 的一个内置功能。 Blazor WebAssembly 和 Blazor Hybrid 应用可以使用基于服务器的 API 来访问必须保持专用和安全的功能。 有关开发和维护基于服务器的 API 的注意事项,请参阅直接访问服务器和网络资源部分。 如果基于服务器的 API 的开发和维护并不适合维护安全和专用应用代码,请采用 Blazor Server 托管模型。

在服务器上安全且私密地维护应用代码是 Blazor Server 的一个内置功能。 Blazor WebAssembly 应用可以使用基于服务器的 API 来访问必须保持专用和安全的功能。 有关开发和维护基于服务器的 API 的注意事项,请参阅直接访问服务器和网络资源部分。 如果基于服务器的 API 的开发和维护并不适合维护安全和专用应用代码,请采用 Blazor Server 托管模型。

下载后即可脱机运行应用

构建为渐进式 Web 应用 (PWA) 的 Blazor WebAssembly 应用和 Blazor Hybrid 应用可以脱机运行,这在客户端无法连接到 Internet 时特别有用。 当与服务器的连接断开时,Blazor Server 应用无法运行。 如果应用必须脱机运行,则 Blazor WebAssembly 和 Blazor Hybrid 是最佳选择。

Blazor WebAssembly 应用可以脱机运行,这在客户端无法连接到 Internet 时特别有用。 当与服务器的连接断开时,Blazor Server 应用无法运行。 如果应用必须脱机运行,则 Blazor WebAssembly 是最佳选择。

静态站点托管

静态站点托管可用于 Blazor WebAssembly 应用,因为这些应用是作为一组静态文件下载到客户端的。 Blazor WebAssembly 应用不需要服务器执行服务器端代码即可下载并运行。 Blazor WebAssembly 应用可以通过内容分发网络 (CDN)(例如 Azure CDN)传递。

尽管 Blazor Hybrid 应用编译为一个或多个独立部署资产,但这些资产通常通过第三方应用商店提供给客户。 如果静态托管是应用要求,请选择 Blazor WebAssembly。

将处理过程转移至客户端

Blazor WebAssembly 和 Blazor Hybrid 应用在客户端上执行,因此将处理卸载到客户端。 Blazor Server 应用在服务器上执行,因此服务器资源需求通常随用户数量和每个用户所需的处理量而增加。 如果可将某个应用的大部分或全部处理卸载到客户端,而该应用处理大量数据,那么 Blazor WebAssembly 或 Blazor Hybrid 是最佳选择。

Blazor WebAssembly 应用在客户端上执行,因此将处理卸载到客户端。 Blazor Server 应用在服务器上执行,因此服务器资源需求通常随用户数量和每个用户所需的处理量而增加。 如果可将某个应用的大部分或全部处理卸载到客户端,而该应用处理大量数据,那么 Blazor WebAssembly 是最佳选择。

对本机客户端功能具有完全访问权限

Blazor Hybrid 应用可通过 .NET 本机应用框架完全访问本机客户端 API 功能。 在 Blazor Hybrid 应用中,Razor 组件直接在本机应用中运行,而不是在 WebAssembly 上运行。 当需要完整的客户端功能时,Blazor Hybrid 是最佳选择。

基于 Web 的部署

Blazor Server 和 Blazor WebAssembly 部署为在下次应用刷新时更新的 Web 应用。

Blazor Hybrid 应用是通常需要安装程序和特定于平台的部署机制的本机客户端应用。

其他资源