3 различные модели размещения Blazor приложения

Blazor — это среда разработки одностраничных веб-приложений с открытым исходным кодом, разработанная Microsoft. В отличие от других фреймворков, таких как Angular, React и Vue, которые зависят от библиотек JavaScript, Blazor позволяет писать и запускать код C # в веб-браузерах через WebAssembly. В этом блоге мы обсудим различные модели хостинга в Blazor.

Модели хостинга

В настоящее время у Blazor есть три модели хостинга:

  • Blazor WebAssembly (на стороне клиента).
  • Blazor Server (на стороне сервера).
  • ASP.NET Core.

Microsoft запустила модель серверного хостинга Blazor в сентябре 2019 года и модель WebAssembly в мае 2020 года.

Давайте быстро рассмотрим каждую модель и обсудим, чем каждая из них отличается.

Blazor WebAssembly (на стороне клиента)

Согласно официальной документации Microsoft, клиентское приложение Blazor WebAssembly (Wasm) запускается в браузере. Когда пользователь открывает веб-страницу или веб-приложение, будет загружен весь код, связанный с логикой на стороне клиента. Это означает, что все зависимости также будут загружены. Таким образом, необходимое время выполнения будет относительным для запуска приложения. После того, как мы все загрузим, не было бы проблем, если бы мы отключились. Поскольку модель хостинга Blazor WebAssembly позволяет нам продолжать использовать приложение в автономном режиме, и мы можем синхронизировать изменения позже.

Structure of Blazor WebAssembly (Client Side)

Преимущества

Преимущества модели хостинга Blazor WebAssembly следующие:

  • WebAssembly позволяет использовать клиентский компьютер для выполнения веб-приложения в браузере. После загрузки приложения вы можете отключить сервер. Приложение продолжит работу, но не будет связываться с сервером для получения новых данных.
  • Благодаря тому, что код запускается на стороне клиента, мы сокращаем время загрузки, поскольку перерисовываются только изменения в DOM (объектной модели документа). Таким образом, данная модель значительно снижает нагрузку на сервер.
  • Эта модель хостинга полностью использует ресурсы и возможности Заказчика.
    Вам не нужен веб-сервер ASP.NET Core для размещения вашего приложения. Существуют сценарии бессерверного развертывания, такие как обслуживание приложения из CDN.

Недостатки

Несмотря на ряд преимуществ, модель хостинга Blazor Wasm имеет ряд недостатков:

Приложение ограничено возможностями браузера. Это связано с тем, что Mono Framework интерпретирует промежуточный язык .NET, поскольку приложение полностью выполняется в браузере клиента.

Примечание. Предварительная компиляция (AOT) запланирована в будущем выпуске.

  • Для этой модели требуется клиентское оборудование и программное обеспечение, совместимые с WebAssembly. Другими словами, Blazor Wasm работает только в последних версиях браузеров.
  • Размер загружаемого файла намного больше, и приложениям требуется больше времени для загрузки, поскольку Wasm загружает все необходимые сборки .NET DLL.
  • Поддержка инструментов .NET и среды выполнения развита не так хорошо. Например, существуют ограничения на совместимость и отладку .NET Standard.

Сервер Blazor (на стороне сервера)

Если мы работаем с моделью хостинга на стороне сервера, приложение Blazor, очевидно, будет работать на сервере, и каждое изменение или событие, происходящее на стороне клиента, будет отправляться на сервер через связь SignalR. Затем сервер обработает события или изменения и при необходимости обновит пользовательский интерфейс на стороне клиента. Это означает, что рендеринг пользовательского интерфейса происходит на стороне сервера.

Structure of Blazor Server (Server Side)

Преимущества

  • Серверные приложения Blazor загружаются намного быстрее, потому что они предварительно обрабатывают HTML-контент.
  • Вы можете в полной мере использовать возможности сервера.
  • Все, что клиенту необходимо для использования приложения, — это веб-браузер, поскольку эта модель не имеет ограничений по версиям браузеров, а это означает, что модель хостинга Blazor Server работает с самыми старыми браузерами.
  • Эта модель обеспечивает большую безопасность, поскольку она не отправляет код приложения клиенту.

Недостатки

  • Для этой модели требуется сервер ASP.NET Core.
  • Необходимо активное соединение с сервером. Приложение не может работать без Интернета.
  • Поскольку он постоянно отправляет информацию как на сервер, так и с сервера, у него более высокая задержка.

ASP.NET Core

Последняя, ​​но не менее важная модель хостинга — это ASP.NET Core. Это улучшенная версия модели хостинга на стороне клиента, которая идеально подходит для браузеров. Эта модель размещения отправляет клиентскую часть приложения Blazor в браузер и подключается к серверу с помощью связи SignalR.

Таким образом, самый простой способ разместить приложение Blazor WebAssembly — это также использовать для его обслуживания веб-приложение ASP.NET Core.

Напомним, что ASP.NET Core кроссплатформенный и может работать практически где угодно. Если вы обнаружите, что используете C # для всех своих разработок, это, вероятно, лучший сценарий для вас в любом случае. С его помощью вы можете развернуть свое веб-приложение, которое также будет содержать ваши ресурсы Blazor Wasm в том же месте.

При создании сайта Blazor WebAssembly вы можете выбрать вариант размещения ASP.NET Core в Visual Studio, установив флажок справа, как показано на следующем рисунке.

ASP.NET Core Hosting in Visual Studio for Windows

ASP.NET Core Hosting in Visual Studio for Mac

Преимущества

  • .NET Core включает набор промежуточного программного обеспечения для маршрутизации и сжатия Blazor.
  • Таким образом, вы развертываете решение для своего полного приложения в одном месте, используя ту же технологию для размещения внешнего и внутреннего кода.
  • Эта модель подходит для подключения к базе данных и операций, поскольку вы можете использовать веб-API для использования и выполнения операций с базой данных.

Недостатки

  • Необходимо учитывать потребление и выставление счетов, поскольку веб-страница, скорее всего, будет размещена в службе приложений или в бессерверной модели. Это не обязательно отрицательный фактор, это скорее фактор, о котором следует знать.
  • Модель ASP.NET Core не работает без подключения к Интернету. Автономного режима нет, поскольку для этой модели требуется активное соединение для многих действий, таких как отправка событий, обновления DOM и т. Д.
  • Обновления DOM обрабатываются на той части сервера, который размещен на сервере ASP.NET Core.
    На стороне клиента отладка невозможна, поскольку инструменты разработки браузера все еще находятся на ранних стадиях использования WebAssembly.

Какую модель хостинга выбрать?

Ответ очень прост: это зависит от приложения, которое вы собираетесь разрабатывать. Один совет, который я хотел бы вам дать, — это выбрать модель хостинга на стороне сервера Blazor, если ваше приложение слишком сложное, а SEO является самым важным. Если ваше приложение небольшое и требует возможности автономной работы, выберите модель размещения Blazor WebAssembly.

Резюме

Blazor представляет два четко дифференцированных подхода к моделям хостинга:

Blazor Server: построена модель DOM для отправки клиенту с сервера. Это наиболее традиционная модель, цель которой — заменить модель .NET Web Forms. Его главная сила — взаимодействие между клиентом и сервером в реальном времени через SignalR.
Blazor WebAssembly: модель SPA, основанная на WebAssembly, т.е. построение DOM выполняется на стороне клиента. В свою очередь, он позволяет выполнять операции на стороне сервера и вызывать API-интерфейсы для запроса данных (с целью получения конфиденциальной информации, которую вы не хотите вычислять на клиенте). Чтобы понять этот подход, вы должны понимать, что такое WebAssembly, о чем мы узнали в предыдущей статье: Blazor WebAssembly: Обзор.