ASP.NET Core Hosted 和 Server-Side Blazor 之间有啥区别，真的吗？

Posted 2023-03-27

【中文标题】ASP.NET Core Hosted 和 Server-Side Blazor 之间有啥区别，真的吗？

【英文标题】：What's the difference between ASP.NET Core Hosted and Server-Side Blazor, really?ASP.NET Core Hosted 和 Server-Side Blazor 之间有什么区别，真的吗？

【发布时间】：2020-01-25 08:24:36

【问题描述】：

我仍在努力理解 ASP.NET Core Hosted 和 服务器端 Blazor 之间的区别。我已经知道同样的问题exists，但这并不令人满意。事实上，我在任何地方都找不到令人满意的答案——答案或多或少是一样的。

如果 hosted 选项使用服务器（IIS、Kestrel），那么为什么要 server-side？令人困惑...遗憾的是官方文档也没有阐明...

更新

混淆源于我们有三个选项来创建 Blazor 应用程序。执行dotnew new --list 后我得到：

dotnet new blazorserver（Blazor 服务器应用）

dotnet blazorwasm（Blazor WebAssembly 应用）

但是，还有第三种选择：

dotnet blazorwasm --hosted（或dotnet blazor --hosted）

与Visual Studio中创建应用时的复选框相同：

documentation 说：

您可以选择将应用配置为使用 ASP.NET Core 通过选中 ASP.NET Core 托管复选框来实现后端

但是没有提供解释是什么意思...

【问题讨论】：

Blazor, ASP.NET Core Hosted vs Server Side in ASP.NET Core的可能重复

@samjudson 如果你注意了，我已经指出了那个问题，但实际上没有答案 - 这就是我再次问的原因。

@JohnB 问题是：如果两个选项都使用服务器，为什么有两个选项？ ??????

但我同意 - 命名非常混乱，当您习惯某些东西时，他们就会去改变它！ :-)

@Thangadurai - 它不是插件，因此与 SL 不同

【参考方案1】：

这是您问题的一部分：

但是，还有第三种选择：

dotnet blazorwasm --hosted（或dotnet blazor --hosted）

与Visual Studio中创建应用时的复选框相同：

documentation 说：

您可以选择将应用配置为使用 ASP.NET Core 通过选中 ASP.NET Core 托管复选框来实现后端

但是没有提供解释是什么意思...

TL;DR

“托管”用于您希望网站后端和使用该后端的 Blazor 客户端都托管在同一网站上的情况。

详细说明

我同意，文档对这一切确实不是很清楚，但解释实际上比看起来简单：

Blazor 应用必须“托管”在某处

首先要记住的是，Blazor WebAssembly“应用程序”不是一个独立的网站，它是一个嵌入网站的应用程序。在很多情况下，它的行为就像一个网站，因为它将被用作单页应用程序，但这绝不是必需的。

本质上，Blazor WebAssembly 应用是通过编译/发布 Blazor 项目创建的一系列文件和一个 javascript 文件。

然后需要将这些文件放在网站上的某个地方，然后将 div 标签的名称和为您的网站生成的 Blazor JS 文件的组合处理将您的应用程序文件连接到浏览器的 WebAssembly 部分，这样就可以了呈现在页面上。

这里的关键是“托管”您的 Blazor 应用程序的网站不必是 ASP.NET Core 网站。 It could be any site, pure html, Drupal, whatever, 它只需要在正确处理 WebAssembly 和 JavaScript 的浏览器上显示即可。

但是，如果您还在 ASP.NET Core 中编写网站的后端，则可以重用该网站

因此，您的 Blazor 项目不必托管在用 ASP.NET Core 编写的网站中，但必须托管在某个地方（以便用户可以看到）。

如果您同时也在编写网站的后端，例如如果您正在编写 API 或 SignalR 集线器以从 Blazor 客户端发送和接收数据，并且如果您正在 ASP.NET Core 中编写该后端，那么您可以重用同一站点来托管您的 Blazor 客户端。

这种情况是“托管”选项的用途。

如果您使用上面屏幕截图中的模板创建项目，并勾选“托管”选项，您将看到创建的 [YourProjectName].Server 项目是 Start Up 项目，但 index.html 页面运行该项目时显示的内容来自 [YourProjectName].Client 项目。

这种方法意味着您的服务器上只运行一个站点（可能好坏），也意味着您不会遇到any CORS issues。

但您根本不必拥有 ASP.NET Core 站点

如果您的 Blazor 站点是一个不从任何服务器读取/写入的独立站点，或者如果它只与 3rd 方 API 或在较旧的 .NET Framework 上运行的现有 Web API 通信，那么您实际上并没有根本需要一个 ASP.NET Core 站点。

在这种情况下，您不使用“托管”选项。

相反，您可以简单地发布 Blazor 项目，然后从发布文件夹中获取文件并将它们托管在任何站点中。

【讨论】：

@BlazingNoob cshtml 页面实际上是 Razor 页面，而不是 Blazor 组件。如果您查看 Startup.cs 的“配置”方法，您会看到服务器应用程序配置为同时使用 Razor 页面和 Blazor。 Blazor 和 Razor 共享站点的路由，因此当您导航到站点的根目录时，您将最终进入 Blazor 页面。但是，如果在您到达那里之前发生了错误，您将被带到 Error.cshtml（这是“外部”“容器”“主机” 站点的错误页面）。 _Layout.chstml 页面是错误页面正在使用的共享布局页面。

@BlazingNoob，完全正确。只是为了进一步混淆，在 MVC 方面，实际上有两种使用 .cshtml 后缀的服务器服务页面：MVC 页面和 Razor 页面。 Razor Pages 是 MVC 页面的轻量级版本，不需要独立的控制器来提供服务。这就是为什么没有控制器端点提供错误页面的原因。当他们决定将 Blazor 组件称为“Razor 组件”而不是“Blazor 组件”时，这变得非常混乱。我仍然希望他们会改变主意。

@clarkbrent 这是一个 Web API 项目。有一个单独的命令用于将 Blazor 服务器端添加到 MVC 站点

@Tarta re this bit "如果我们的 Blazor 应用程序仍然依赖服务器进行所有计算，那么它将与 Blazor 服务器模型完全相同"。这不太对，在 Blazor Server 中，代码在服务器上运行，因此您不需要休息 API，例如可以直接与 EF 对话（这在 Blazor WASM 中不起作用）。 Blazor Server 在这方面更像是一个 WinForms 应用程序。 Blazor Server 的行为实际上类似于 TS/RDP 会话，其中用户输入被传递到服务器，然后所有工作都在服务器上完成，然后对 UI 的更改被传递回客户端

@Tarta 我还没有在 Blazor 中体验过 CORS 的乐趣，所以说实话我不知道。迄今为止，我们所有的东西都在调用我们自己的 API。我认为一定有办法做到这一点，这是一个非常标准的用例。

【参考方案2】：

更新

我知道你现在从哪里来。混淆源于您在使用客户端托管的 Blazor 时有一个名为 --hosted 的选项。此选项意味着让 Blazor 包含 ASP.NET Core 运行时。

为什么选择这个选项？因为您可以编写不需要任何类型的外部服务连接的离线应用程序（例如计算器应用程序），从而使 ASP.NET Core 变得无关紧要。但是，您可能想要编写一个在线应用程序来访问在线数据库、外部 API、进行验证等。对于这些类型的应用程序，您将需要一个 ASP.NET Core 堆栈来支持您的应用程序。

查看此常见问题解答：https://github.com/aspnet/Blazor/wiki/FAQ#q-can-i-use-blazor-with-aspnet-core-on-the-server

原答案

它们是两种托管模式：服务器托管和客户端托管。

区别在于应用是托管在服务器还是客户端。服务器托管意味着您的应用程序逻辑在服务器中运行（您可以认为它类似于 Web 窗体），您单击一个按钮，“Ajax”调用发送请求，服务器接收请求，并将更新的页。但是，这里它使用 SignalR 而不是 Ajax，这是一种低级套接字通信（读取效率）。而不是更新整个页面，它只更新相关部分（因此它是一个单页应用程序）。

另一方面，客户端托管意味着您的逻辑在浏览器中运行。可以把它想象成你的 C# 逻辑被转换成 JS，并且嵌入到页面中。所以逻辑在浏览器中运行。在您可能想了解的 WebAssembly 引入之后，这是可能的。

假设您要创建一个计算器应用。然后，您的服务器托管应用程序将需要与服务器通信以计算并获取每次计算的结果，而托管的客户端不需要，并在浏览器中计算结果。

您可能想知道，为什么我们有两种选择。原因是许多浏览器对 WebAssembly（客户端托管的应用程序所依赖的）的支持要么不完整，要么不存在，而且性能也存在很大差异。

https://caniuse.com/#feat=wasm

【讨论】：

So: 1) blazor：所有的html渲染和app的逻辑都只在浏览器中执行； 2) hosted：浏览器仅呈现 HTML，但所有逻辑都在服务器上执行（交互通过 SignalR）； 3) 服务器端：???

@JohnyL 只有两个版本：客户端托管（代码在浏览器中运行）或服务器托管（代码在服务器中运行）。

我已经更新了问题并显示了这三个选项。

感谢澄清更新！现在谜题已经解决了！谢谢！

投了反对票，因为答案的第一部分与问题无关，第二部分没有正确解释 --hosted 时 Blazor 应用程序如何提供给浏览器的区别使用选项。

【参考方案3】：

问题是关于 Visual Studio 中的“ASP.NET Core 托管”选项，同时使用 Blazor WebAssembly App 创建一个新的 Blazor 项目。

选择此选项将为您构建 3 个项目（如果未选择此选项，则为 1 个 WebAssembly 项目）

服务器端 Blazor 项目 客户端 Blazor 项目 (WebAssembly) 服务器和客户端项目之间共享实体的共享项目。

使用此选项，您可以拥有

Blazor WebAssembly 仅适用于可以在浏览器中执行逻辑的项目部分。 服务器托管选项，所有处理都在服务器上完成，只有 HTML 呈现到浏览器上。

部署后，所有这些项目都会转到同一个位置。因此，如果您对服务器端和客户端选项都有要求，那就去吧。

【讨论】：

感谢您再提供一个好答案！ +1 努力！ ?

【参考方案4】：

我在阅读文档时也有同样的困惑。但在Blazor webassembly 部分有解释

dotnet blazorwasm - is a standalone project

dotnet blazorwasm --hosted（或 dotnet blazor --hosted）-is a projected hosted with ASP.NET Core backing API's.

托管部署通过在 Web 服务器上运行的 ASP.NET Core 应用为浏览器提供 Blazor WebAssembly 应用。

客户端 Blazor WebAssembly 应用与服务器应用的任何其他静态 Web 资产一起发布到服务器应用的 /bin/Release/TARGET FRAMEWORK/publish/wwwroot 文件夹中。这两个应用程序部署在一起。需要能够托管 ASP.NET Core 应用程序的 Web 服务器。对于托管部署，Visual Studio 包含 Blazor WebAssembly 应用程序项目模板（使用 dotnet new 命令时为 blazorwasm 模板）并选择了托管选项（使用 dotnet new 命令时为-ho|--hosted）。

【参考方案5】：

这是我的两分钱。

在选中 ASP.NET Core Hosted 复选框的情况下创建 Blazor WebAssembly 应用。

创建后观察项目引用。

请注意，服务器项目引用客户端项目。 我和其他人有同样的困惑，客户端调用服务器，它们是两个独立的 Visual Studio 项目。所以这个项目引用让我很困惑。

事实上，客户端项目由服务器项目托管和服务。当我们要运行应用程序时，我们需要运行服务器项目而不是客户端项目。

所以当你想运行解决方案（App）时，你必须确保将服务器项目设置为启动项目，而不是服务器和客户端。由于我最初的误解，我正在设置多个启动项目，认为客户端（如 React App）调用服务器（WebApi），并且它们应该同时运行，以便客户端调用服务器。

以上是正确的，但以下是不正确。

如果你这样做，你会得到以下错误，这让我困扰了很长时间并让我思考。

Microsoft Visual Studio - 出现一个或多个错误。无法启动调试适配器错误

最后，如果您想通过为不同类型的 Blazor 应用添加 docker 文件和 docker-compose 文件来进行对接，请查看github repo。

对于我们正在讨论的这类应用，请查看该存储库中的 this 和 this folder。

【讨论】：

是否可以路由到服务器中的页面？

这是一个很好的答案。启动文件中的哪里是启动客户端的定义？我的意思是，它需要在某个地方进行配置，应该启动哪个客户端。

【参考方案6】：

Blazor-WASM

应用程序在第一次加载后可以离线工作。例如，如果您使用 Blazor WASM 制作贷款计算器，您可以在第一次加载时将所有数据、业务逻辑和验证发送到客户端，例如贷款类型、贷款利率、最大还款期等，因为逻辑也在客户端，当您更改贷款类型或还款期限时，它不需要一次又一次地与服务器通信，因为客户端的业务逻辑使用用户选择的数据 Blazor 可以呈现 UI 并显示结果。

Blazor 服务器

应用程序使用服务器呈现 UI，以便在贷款应用程序上，如果用户更改贷款类型 blazor 使用 SignalR 将该用户更改值发送到服务器，并且在服务器中具有数据和获取结果的逻辑，在该服务器呈现之后UI 并使用 SignalR 将 UI 更改发送到客户端，并在客户端屏幕中重绘 UI。

Blazor-ASP.NET Core 托管

Visual Studio 在核心托管模板中生成 3 个项目

ClientProject - 这是一个 Blazor-WASM 应用程序 ServerProject - 这是一个 .NET CORE API SharedClassProject - 这是一个包含共享的类库 客户端和服务器之间的对象

作为第一个加载贷款示例中的贷款类型和计算逻辑在客户端加载。

如果用户选择贷款类型，如果利率在数据库中，Blazor 会创建一个对 API 应用程序的 http 调用，以根据所选贷款类型获取贷款利率。

然后由于客户端的计算逻辑，用户进入还款期。现在应用程序可以计算结果并渲染 UI 以显示结果。因此，使用此模型，您可以在服务器中保留一些数据或逻辑，而在客户端保留其他数据或逻辑。

【讨论】：

服务器项目是 Web API - 哈哈真希望他们这么称呼它，我以为它是 Blazor 服务器应用程序！

【参考方案7】：

blazor asp.net 核心托管模型的一大优点是您可以从服务器使用许多很棒的东西，但仍然需要通过 API 调用它们。如果您不想在没有例如的情况下使用 blazor 服务器端或 blazor 客户端，那完全可以。身份系统。

【讨论】：

这没有回答问题。

【参考方案8】：

所以 Blazor 服务器使用 SignalR 在服务器和客户端之间进行通信，而 Blazor WASM 使用 WASM（客户端，第一次加载后没有通信）和后端 asp.net 核心（如果 --hosted）。