Основы Blazor. Разбираем Шаблон Проекта Веб-Приложения Blazor. Продолжение
1. Основы режимов рендеринга
2. Базовая конфигурация
3. Параметр интерактивности Server
Параметр интерактивности WebAssembly
В отличие от режимов интерактивности сервера, которые создают только один проект на решение, параметры WebAssembly и Auto включают два проекта. Один проект - для приложения сервера, а другой — для интерактивных страниц и компонентов клиента.
Глобальная интерактивность WebAssembly
Interactive render mode: WebAssembly
Interactivity location: Global
В проекте сервера Program.cs включает операторы для активации интерактивности WebAssembly:
-
AddInteractiveWebAssemblyComponents добавляет сервисы интерактивности на клиенте. -
AddInteractiveWebAssemblyRenderMode настраивает интерактивный рендеринг на стороне клиента.-
AddAdditionalAssemblies находит компоненты в клиентском приложении, создавая ссылку на серверное приложение.builder.Services.AddRazorComponents()
.AddInteractiveWebAssemblyComponents();
app.MapRazorComponents<App>()
.AddInteractiveWebAssemblyRenderMode()
.AddAdditionalAssemblies(typeof(Counter).Assembly);
Настройка Global применит режим рендеринга приложения в App.razor. Экземпляры компонентов HeaderOutlet и Routes получат
@rendermode="@InteractiveWebAssembly", т.е. любые дочерние компоненты этих компонентов будут иметь интерактивность WebAssembly. Файл Routes.razor создаётся в клиентском приложении, где происходит вся интерактивность.Эта конфигурация подходит для приложений, которые используют интерактивность WebAssembly для всех компонентов, что снижает нагрузку на сервер.
Постраничный/Покомпонентный интерактивный WebAssembly
Interactive render mode: WebAssembly
Interactivity location: Per Page/Component
В этой конфигурации (см. картинку) компонент App.razor не указывает режима рендеринга для экземпляров компонентов. Страницы и компоненты выбирают свой режим рендеринга - по умолчанию рендерятся статически (без интерактивности). Для поддержки как серверных, так и клиентских компонентов компонент Route генерируется в проекте Server и ссылается на маршруты компонентов Client через свойство AdditionalAssemblies:
csharp
<Router AppAssembly="@typeof(Program).Assembly" AdditionalAssemblies="new[] { typeof(Client._Imports).Assembly }">
…
</Router>
Counter — единственный интерактивный компонент в такой конфигурации, поэтому он размещается в проекте Client. Атрибут
@rendermode InteractiveWebAssembly в Counter указывает на его режим интерактивности. Остальные компоненты генерируются в проекте Server, поскольку они будут визуализироваться статически. Компонент Weather настроен с использованием StreamRendering.Эта конфигурация подходит для приложений, которые необходимо оптимизировать с помощью статического рендеринга сервера, когда интерактивность не нужна. Для компонентов, которым требуется интерактивность WebAssembly, эту функцию можно включить с помощью атрибута
rendermode. В заключение рассмотрим параметр режима рендеринга Auto.
Окончание следует…
Источник: https://www.telerik.com/blogs/unified-blazor-web-app-project-template-fully-explained