Модели размещения ASP.NET Core Blazor

В этой статье описаны Blazor модели размещения, в основном ориентированные на Blazor Server приложения и Blazor WebAssembly версии .NET, предшествующие .NET 8. Руководство в этой статье относится ко всем выпускам .NET для приложений, Blazor Hybrid работающих на собственных мобильных и классических платформах. Blazor Web Apps в .NET 8 или более поздней версии более подробно описаны способом Razor отрисовки компонентов, которые описываются в качестве режима отрисовки. Режимы отрисовки кратко касаются в статье "Основы" и подробно описаны в ASP.NET режимах отрисовки основных Blazor компонентов узла компонентов.

Blazor — это веб-платформа для создания компонентов пользовательского веб-интерфейса (компонентов Razor), которые можно размещать различными способами. Компоненты Razor могут выполняться на стороне сервера в ASP.NET Core (Blazor Server), а не на стороне клиента в браузере в среде выполнения .NET на основе WebAssembly (Blazor WebAssembly, Blazor WASM). Можно также размещать компоненты Razor в нативных мобильных и классических приложениях, чтобы эти компоненты прорисовывались во внедренном элементе управления Web View (Blazor Hybrid). Независимо от модели размещения, для создания компонентов Razor применяется один и тот же способ. Одни и те же компоненты Razor могут использоваться с любыми моделями размещения без изменений.

Blazor Server

Blazor Server С помощью модели размещения компоненты выполняются на сервере из приложения ASP.NET Core. Обновление элементов пользовательского интерфейса, обработка событий и вызовы JavaScript обрабатываются через подключение SignalR с использованием протокола WebSocket. Состояние на сервере, связанное с каждым подключенным клиентом, называется каналом. Каналы не привязываются к конкретным сетевым подключениям и могут допускать временные перебои в работе сети и попытки клиента повторно подключиться к серверу при потере соединения.

В традиционном приложении с отрисовкой на сервере открытие одного и того же приложения в нескольких экранах браузера (во вкладках или iframes) обычно не приводит к дополнительным требованиям к ресурсам на сервере. Blazor Server Для модели размещения каждый экран браузера требует отдельного канала и отдельных экземпляров состояния компонента, управляемого сервером. Blazor рассматривает закрытие вкладки браузера или переход по внешнему URL-адресу как корректное завершение. В случае корректного завершения работы канал и связанные ресурсы немедленно освобождаются. Клиент может также отключиться некорректно, например из-за прерывания работы сети. Blazor Server хранит отключенные каналы в течение настраиваемого интервала, чтобы разрешить клиенту повторное подключение.

В клиенте скрипт Blazor устанавливает подключение SignalR к серверу. Сценарий обрабатывается из внедренного ресурса в общей платформе ASP.NET Core.

Модель размещения Blazor Server обладает несколькими преимуществами:

• Размер загрузки значительно меньше, чем при Blazor WebAssembly использовании модели размещения, и приложение загружается гораздо быстрее.
• Приложение полностью использует возможности сервера, в том числе API .NET Core.
• .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 размещения выполняет компоненты на стороне клиента в браузере в среде выполнения .NET на основе WebAssembly. Razor компоненты, их зависимости и среда выполнения .NET загружаются в браузер. Компоненты выполняются непосредственно в потоке пользовательского интерфейса браузера. Обновления пользовательского интерфейса и обработка событий выполняются в рамках одного процесса. Ресурсы развертываются как статические файлы на веб-сервере или службе, способных обслуживать статическое содержимое клиентам.

Blazor веб-приложения могут использовать Blazor WebAssembly модель размещения для включения взаимодействия на стороне клиента. При создании приложения, которое выполняется исключительно в Blazor WebAssembly модели размещения без отрисовки на стороне сервера и интерактивности, приложение называется автономным приложениемBlazor WebAssembly.

Когда автономное Blazor WebAssembly приложение использует серверное приложение ASP.NET Core для обслуживания своих файлов, приложение называется размещенным приложениемBlazor WebAssembly. С помощью размещенного приложения Blazor WebAssembly вы получаете полноценный интерфейс для веб-разработки с использованием .NET, включая возможность совместного использования кода между клиентскими и серверными приложениями, поддержку предварительной отрисовки, а также возможность интеграции с MVC и Razor Pages. Размещенное клиентское приложение может взаимодействовать со своим серверным приложением по сети посредством разнообразных платформ обмена сообщениями и протоколов, таких как веб-API, gRPC-Web и SignalR (используйте ASP.NET Core SignalR с Blazor).

Приложение Blazor WebAssembly, созданное как прогрессивное веб-приложение (PWA), использует современные браузерные API, чтобы поддерживать множество возможностей клиентского приложения в собственном коде, например: работа в автономном режиме, запуск в собственном окне приложения, запуск из операционной системы узла, получение push-уведомлений и автоматическое обновление в фоновом режиме.

Скрипт Blazor обрабатывает:

• Скачивание среды выполнения ,NET, Razor компонентов и зависимостей компонента.
• Инициализация среды выполнения.

Размер опубликованного приложения, также называемый размером полезных данных, является критически важным фактором для удобства работы с приложением, влияющим на производительность. Крупное приложение скачивается в браузере довольно долго, что ухудшает взаимодействие с пользователем. Blazor WebAssembly оптимизирует размер полезных данных, чтобы сократить время скачивания:

• При публикации неиспользуемый код исключается из приложения средством обрезки для промежуточного языка.
• HTTP-ответы сжимаются;
• среда выполнения и сборки .NET кэшируются в браузере.

Модель размещения Blazor WebAssembly обладает несколькими преимуществами:

• Для автономных Blazor WebAssembly приложений нет зависимости на стороне сервера .NET после скачивания приложения с сервера, поэтому приложение остается функциональным, если сервер переходит в автономный режим.
• Ресурсы и возможности клиента используются полностью.
• Рабочая нагрузка переносится с сервера на клиент.
• Для автономных Blazor WebAssembly приложений веб-сервер ASP.NET Core не требуется для размещения приложения. Возможны сценарии бессерверного развертывания, например обслуживание приложения из сети доставки содержимого (CDN).

Модель размещения Blazor WebAssembly имеет указанные ниже ограничения.

• Razor компоненты ограничены возможностями браузера.
• Дополнительные требования к клиентскому аппаратному и программному обеспечению (например, поддержка WebAssembly).
• Размер загрузки больше, а загрузка компонентов занимает больше времени.
• Код, отправленный клиенту, не может быть защищен от проверки и изменения пользователями.

Интерпретатор промежуточного языка .NET (IL) включает частичную поддержку JIT-среды выполнения для повышения производительности среды выполнения. Интерпретатор JIT оптимизирует выполнение байт-кодов интерпретатора, заменив их крошечными большими двоичными объектами кода WebAssembly. Интерпретатор JIT автоматически включается для Blazor WebAssembly приложений, за исключением случаев отладки.

Blazor поддерживает упреждающую компиляцию (AOT), с помощью которой вы можете скомпилировать код .NET непосредственно в WebAssembly. Компиляция AOT позволяет повысить производительность среды выполнения за счет увеличения размера приложения. Дополнительные сведения см. в статье ASP.NET Средства сборки Core Blazor WebAssembly и компиляция с заранеей компиляцией (AOT).

Те же средства сборки .NET WebAssembly, используемые для компиляции AOT, также повторно связывают среду выполнения .NET WebAssembly, чтобы обрезать неиспользуемый код среды выполнения. Blazor также обрезает неиспользуемый код из библиотек платформы .NET. Компилятор .NET дополнительно прекомментирует автономное Blazor WebAssembly приложение для небольших полезных данных приложения.

Компоненты WebAssembly, отрисованные Razor в WebAssembly, могут использовать собственные зависимости , созданные для запуска в WebAssembly.

Blazor Hybrid

Blazor также можно использовать для создания нативных клиентских приложений с помощью гибридного подхода. Гибридные приложения — это нативные приложения, которые используют веб-технологии для своих функциональных возможностей. В приложении Blazor Hybrid компоненты Razor выполняются непосредственно в нативном приложении (не в WebAssembly) наряду с любым другим кодом .NET и прорисовывают пользовательский веб-интерфейс на основе HTML и CSS во встроенном элементе управления Web View с помощью локального канала взаимодействия.

Приложения Blazor Hybrid можно создавать с помощью различных платформ для собственных приложений .NET, включая .NET MAUI, WPF и Windows Forms. Blazor предоставляет элементы управления BlazorWebView для добавления компонентов Razor в приложения, созданные с помощью этих платформ. Использование Blazor с .NET MAUI предоставляет удобный способ создания кросс-платформенных приложений Blazor Hybrid для мобильных и настольных систем, а интеграция Blazor с WPF и Windows Forms может быть отличным вариантом модернизации существующих приложений.

Так как приложения Blazor Hybrid являются нативными, они могут поддерживать функциональные возможности, которые доступны не только для веб-платформы. Приложения Blazor Hybrid имеют полный доступ к собственным возможностям платформы через обычные интерфейсы API .NET. Приложения Blazor Hybrid могут совместно и повторно использовать компоненты с существующими приложениями Blazor Server или Blazor WebAssembly. Приложения Blazor Hybrid объединяют преимущества веб-приложений, нативных приложений и платформы .NET.

Модель размещения Blazor Hybrid обладает несколькими преимуществами:

• повторное использование существующих компонентов, которые могут совместно использоваться в мобильных системах, настольных системах и в Интернете;
• использование навыков, опыта и ресурсов веб-разработки;
• приложения имеют полный доступ к собственным возможностям устройства.

Модель размещения Blazor Hybrid имеет указанные ниже ограничения.

• Для каждой целевой платформы нужно создать, развернуть и поддерживать отдельные нативные клиентские приложения.
• Собственные клиентские приложения обычно занимают больше времени для поиска, скачивания и установки при доступе к веб-приложению в браузере.

Дополнительные сведения см. в статье об ASP.NET Blazor Hybrid.

Дополнительные сведения о платформах Майкрософт для нативных клиентских приложений см. в следующих ресурсах:

• .NET Multi-platform App UI (.NET MAUI)
• Windows Presentation Foundation (WPF)
• Windows Forms

Какую модель размещения Blazor следует выбрать?

Модель размещения компонента устанавливается в режиме отрисовки либо во время компиляции, либо во время компиляции, которая описывается примерами в режимах отрисовки ASP.NET CoreBlazor. В следующей таблице приведены основные рекомендации по настройке режима отрисовки для определения модели размещения компонента. Для автономных Blazor WebAssembly приложений все компоненты приложения отображаются на клиенте с Blazor WebAssembly помощью модели размещения.

К приложениям Blazor Hybrid относятся приложения .NET MAUI, WPF и платформы Windows Forms.

Функция	Blazor Server	Blazor WebAssembly (WASM)	Blazor Hybrid
Полная совместимость .NET API	✔️Поддержанный	❌Не поддерживаются	✔️Поддержанный
Прямой доступ к ресурсам сервера и сети	✔️Поддержанный	❌Не поддерживается†	❌Не поддерживается†
Небольшой размер полезных данных с быстрым начальным временем загрузки	✔️Поддержанный	❌Не поддерживаются	❌Не поддерживаются
Скорость выполнения близка к скорости собственного кода	✔️Поддержанный	✔️Поддерживается.	✔️Поддержанный
Безопасный и закрытый код приложения на сервере	✔️Поддержанный	❌Не поддерживается†	❌Не поддерживается†
Запуск приложений в автономном режиме после скачивания	❌Не поддерживаются	✔️Поддержанный	✔️Поддержанный
Размещение статических сайтов	❌Не поддерживаются	✔️Поддержанный	❌Не поддерживаются
Разгрузка обработки клиентам	❌Не поддерживаются	✔️Поддержанный	✔️Поддержанный
Полный доступ к возможностям нативного клиента	❌Не поддерживаются	❌Не поддерживаются	✔️Поддержанный
Развертывание на основе Интернета	✔️Поддержанный	✔️Поддержанный	❌Не поддерживаются

Приложения † Blazor WebAssembly и Blazor Hybrid могут использовать API на основе сервера для доступа к ресурсам сервера/сети и доступа к закрытому и защищенному коду приложения.
‡Blazor WebAssembly достигает почти производительности, близкой к собственному коду, благодаря предварительной компиляции (AOT).

После выбора модели размещения для приложения вы можете создать приложение Blazor Server или Blazor WebAssembly на основе шаблона проекта Blazor. Дополнительные сведения см. в статье Инструментарий для ASP.NET Core Blazor.

Сведения о создании приложения Blazor Hybrid см. в статьях, приведенных в разделе Учебники по ASP.NET Core Blazor Hybrid.

Полная совместимость .NET API

Компоненты, отрисованные для Blazor Server модели размещения и Blazor Hybrid приложений, имеют полную совместимость API .NET, а компоненты, отрисованные для Blazor WebAssembly них, ограничены подмножеством API .NET. Если спецификация приложения требует одного или нескольких API .NET, недоступных для компонентов WebAssembly, а затем выберите для отрисовки Blazor Server компонентов или использования Blazor Hybrid.

Прямой доступ к ресурсам сервера и сети

Компоненты, отрисованные для Blazor Server модели размещения, имеют прямой доступ к серверам и сетевым ресурсам, в которых выполняется приложение. Так как компоненты, размещенные с помощью Blazor WebAssembly клиента или Blazor Hybrid выполняемые на клиенте, не имеют прямого доступа к серверам и сетевым ресурсам. Компоненты могут получать доступ к серверам и сетевым ресурсам косвенно через защищенные серверные API. Серверные API-интерфейсы могут быть доступны через сторонние библиотеки, пакеты и службы. Учитывайте следующие рекомендации:

• Сторонние библиотеки, пакеты и службы могут быть дорогостоящими в плане внедрения и поддержки, недостаточно поддерживаться или представлять риск с точки зрения безопасности.
• Если один или несколько серверных API-интерфейсов разрабатываются внутри организации, то для их сборки и обслуживания потребуются дополнительные ресурсы.

Blazor Server Используйте модель размещения, чтобы избежать необходимости предоставлять API из серверной среды.

Небольшой размер полезной нагрузки с быстрым временем начальной загрузки

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

Скорость выполнения близка к скорости собственного кода

Приложения Blazor Hybrid запускаются в среде выполнения .NET в собственном коде целевой платформы, что обеспечивает максимально возможную скорость.

Компоненты, отрисованные для Blazor WebAssembly модели размещения, включая прогрессивные веб-приложения (PWAs) и автономные Blazor WebAssembly приложения запускаются с помощью среды выполнения .NET для WebAssembly, которая медленнее, чем выполняется непосредственно на платформе. Рекомендуется использовать предварительно скомпилированный (AOT) для повышения производительности среды выполнения при использовании Blazor WebAssembly.

Код приложения защищен и хранится в частном порядке на сервере

Обеспечение безопасного и закрытого использования кода приложения на сервере — это встроенная функция компонентов, отрисованных для Blazor Server модели размещения. Компоненты, отрисованные с помощью Blazor WebAssembly моделей или Blazor Hybrid размещения, могут использовать api на основе сервера для доступа к функциям, которые должны храниться в закрытом и безопасном режиме. Действуют рекомендации по разработке и обслуживанию серверных API-интерфейсов, описанных в разделе Прямой доступ к ресурсам сервера и сети. Если разработка и обслуживание api на основе сервера не желательна для поддержания защищенного и частного кода приложения, отрисовка компонентов для Blazor Server модели размещения.

Запуск приложений в автономном режиме после скачивания

Blazor WebAssembly Автономные приложения, созданные как прогрессивные веб-приложения (PWAs) и Blazor Hybrid приложения могут работать в автономном режиме, что особенно полезно, если клиенты не могут подключаться к Интернету. Компоненты, отрисованные для Blazor Server модели размещения, не выполняются при потере подключения к серверу. Если приложение должно работать в автономном режиме, автономный Blazor WebAssembly и Blazor Hybrid оптимальный вариант.

Размещение статических сайтов

Размещение статических сайтов возможно с автономными Blazor WebAssembly приложениями, так как они скачиваются на клиенты в виде набора статических файлов. Blazor WebAssembly Автономные приложения не требуют, чтобы сервер выполнял код на стороне сервера для скачивания и запуска и их доставки с помощью сеть доставки содержимого (CDN) (например, Azure CDN).

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

Разгрузка обработки на клиентах

Приложения Blazor WebAssembly и Blazor Hybrid выполняются на клиентах, что позволяет передать задачи обработки клиентам. Приложения Blazor Server выполняются на сервере, поэтому спрос на ресурсы сервера обычно увеличивается в зависимости от количества пользователей и объема обработки, который требуется для каждого пользователя. Если можно передать большинство или все операции обработки приложения на клиенты, а приложение обрабатывает значительный объем данных, рекомендуется выбрать Blazor WebAssembly или Blazor Hybrid.

Полный доступ к возможностям нативного клиента

Приложения Blazor Hybrid имеют полный доступ к возможностям собственного API клиента посредством собственных платформ приложений .NET. В приложениях Blazor Hybrid компоненты Razor запускаются непосредственно в собственном приложении, а не в веб-сборке. Если требуются все возможности клиента, оптимальным вариантом будет Blazor Hybrid.

Развертывание на основе Интернета

Blazor веб-приложения обновляются при следующем обновлении приложения из браузера.

Приложения Blazor Hybrid — это клиентские приложения в собственном коде, для которых обычно требуется установщик и механизм развертывания для конкретной платформы.

Настройка модели размещения компонента

Чтобы задать модель размещения компонента в Blazor Server режиме отрисовки или Blazor WebAssembly во время компиляции или динамически во время выполнения, установите его режим отрисовки. Режимы отрисовки полностью объяснены и демонстрируются в статье о режимах отрисовки ASP.NET CoreBlazor. Мы не рекомендуем переходить из этой статьи непосредственно в статью режимов отрисовки, не читая содержимое в статьях между этими двумя статьями. Например, режимы отрисовки проще понять, просматривая Razor примеры компонентов, но базовая Razor структура компонентов и функция не рассматриваются до тех пор, пока не будет достигнута статья ASP.NET Основные Blazor основы . Кроме того, рекомендуется узнать о Blazorшаблонах проектов и инструментах, прежде чем работать с примерами компонентов в статье режимов отрисовки .