День 2079. #BlazorBasics
Основы Blazor. Разбираем Шаблон Проекта Веб-Приложения Blazor. Продолжение
1. Основы режимов рендеринга
2. Базовая конфигурация
Параметр интерактивности Server
Существует три режима интерактивности: Server, WebAssembly и Auto. И для каждого можно выбрать место настройки интерактивности Global или Per Page/Component.
Когда интерактивность добавляется в приложение Blazor, файлы App.razor и Program.cs будут настроены с параметрами для желаемого режима интерактивности. Если включен параметр Include sample pages, примеры компонентов показывают, как пользоваться выбранным режимом.
Глобальный интерактивный сервер
Interactive render mode: Server
Interactivity location: Global
В режиме интерактивного сервера (см. картинку) Program.cs включает операторы для включения этой функции:
Настройка Global применит режим рендеринга приложения в App.razor. Экземпляры компонентов HeaderOutlet и Routes получат
Примеры компонентов Counter и Weather сгенерируются в соответствии с настройкой Global. Поскольку интерактивный режим был установлен в экземпляре компонента Routes, в примерах не нужно указывать режим рендеринга. В примере компонента Weather не будет
Эта конфигурация подходит для приложений, которые будут полностью интерактивными для всех компонентов.
Постраничный/Покомпонентный интерактивный сервер
Interactive render mode: Server
Interactivity location: Per Page/Component
Сгенерированный проект будет похож на предыдущий, но компоненты App, Counter и Weather будут немного отличаться.
При использовании параметра Per Page/Component App.razor не указывает режима рендеринга для экземпляров компонентов. Это позволяет любой странице или дочернему компоненту выбирать свой режим рендеринга. Если режим рендеринга не указан, то эти компоненты рендерятся статически (без интерактивности).
Чтобы продемонстрировать гибкость проекта Per Page/Component, образцы компонентов Counter и Weather включают соответствующие конфигурации. В код компонента Counter добавлен
Эта конфигурация подходит для приложений, которые необходимо оптимизировать с помощью статической серверной отрисовки, когда интерактивность не нужна. Для компонентов, требующих интерактивности сервера, эта функция может быть включена через атрибут
Далее рассмотрим параметры режима рендеринга WebAssembly.
Продолжение следует…
Источник: https://www.telerik.com/blogs/unified-blazor-web-app-project-template-fully-explained
Основы Blazor. Разбираем Шаблон Проекта Веб-Приложения Blazor. Продолжение
1. Основы режимов рендеринга
2. Базовая конфигурация
Параметр интерактивности Server
Существует три режима интерактивности: Server, WebAssembly и Auto. И для каждого можно выбрать место настройки интерактивности Global или Per Page/Component.
Когда интерактивность добавляется в приложение Blazor, файлы App.razor и Program.cs будут настроены с параметрами для желаемого режима интерактивности. Если включен параметр Include sample pages, примеры компонентов показывают, как пользоваться выбранным режимом.
Глобальный интерактивный сервер
Interactive render mode: Server
Interactivity location: Global
В режиме интерактивного сервера (см. картинку) Program.cs включает операторы для включения этой функции:
builder.Services.AddRazorComponents()
.AddInteractiveServerComponents();
app.MapRazorComponents<App>()
.AddInteractiveServerRenderMode();
Настройка Global применит режим рендеринга приложения в App.razor. Экземпляры компонентов HeaderOutlet и Routes получат
@rendermode="@InteractiveServer", т.е. любой дочерний элемент этих компонентов будет иметь интерактивность сервера.Примеры компонентов Counter и Weather сгенерируются в соответствии с настройкой Global. Поскольку интерактивный режим был установлен в экземпляре компонента Routes, в примерах не нужно указывать режим рендеринга. В примере компонента Weather не будет
@attribute [StreamRendering], поскольку интерактивность через событие OnInitializedAsync обеспечивает аналогичный опыт.Эта конфигурация подходит для приложений, которые будут полностью интерактивными для всех компонентов.
Постраничный/Покомпонентный интерактивный сервер
Interactive render mode: Server
Interactivity location: Per Page/Component
Сгенерированный проект будет похож на предыдущий, но компоненты App, Counter и Weather будут немного отличаться.
При использовании параметра Per Page/Component App.razor не указывает режима рендеринга для экземпляров компонентов. Это позволяет любой странице или дочернему компоненту выбирать свой режим рендеринга. Если режим рендеринга не указан, то эти компоненты рендерятся статически (без интерактивности).
Чтобы продемонстрировать гибкость проекта Per Page/Component, образцы компонентов Counter и Weather включают соответствующие конфигурации. В код компонента Counter добавлен
@rendermode InteractiveServer, указывающий, что он использует режим интерактивный сервер. Компонент Weather не требует интерактивности и отображается статически. @attribute [StreamRendering] используется для отображения сообщения «загрузка» во время загрузки данных компонента Weather. После загрузки данных StreamRendering обновляет компонент для окончательной отрисовки результатов.Эта конфигурация подходит для приложений, которые необходимо оптимизировать с помощью статической серверной отрисовки, когда интерактивность не нужна. Для компонентов, требующих интерактивности сервера, эта функция может быть включена через атрибут
rendermode. Далее рассмотрим параметры режима рендеринга WebAssembly.
Продолжение следует…
Источник: https://www.telerik.com/blogs/unified-blazor-web-app-project-template-fully-explained
👍12
День 2080. #BlazorBasics
Основы Blazor. Разбираем Шаблон Проекта Веб-Приложения Blazor. Продолжение
1. Основы режимов рендеринга
2. Базовая конфигурация
3. Параметр интерактивности Server
Параметр интерактивности WebAssembly
В отличие от режимов интерактивности сервера, которые создают только один проект на решение, параметры WebAssembly и Auto включают два проекта. Один проект - для приложения сервера, а другой — для интерактивных страниц и компонентов клиента.
Глобальная интерактивность WebAssembly
Interactive render mode: WebAssembly
Interactivity location: Global
В проекте сервера Program.cs включает операторы для активации интерактивности WebAssembly:
-
-
-
Настройка Global применит режим рендеринга приложения в App.razor. Экземпляры компонентов HeaderOutlet и Routes получат
Эта конфигурация подходит для приложений, которые используют интерактивность WebAssembly для всех компонентов, что снижает нагрузку на сервер.
Постраничный/Покомпонентный интерактивный WebAssembly
Interactive render mode: WebAssembly
Interactivity location: Per Page/Component
В этой конфигурации (см. картинку) компонент App.razor не указывает режима рендеринга для экземпляров компонентов. Страницы и компоненты выбирают свой режим рендеринга - по умолчанию рендерятся статически (без интерактивности). Для поддержки как серверных, так и клиентских компонентов компонент Route генерируется в проекте Server и ссылается на маршруты компонентов Client через свойство AdditionalAssemblies:
Counter — единственный интерактивный компонент в такой конфигурации, поэтому он размещается в проекте Client. Атрибут
Эта конфигурация подходит для приложений, которые необходимо оптимизировать с помощью статического рендеринга сервера, когда интерактивность не нужна. Для компонентов, которым требуется интерактивность WebAssembly, эту функцию можно включить с помощью атрибута
В заключение рассмотрим параметр режима рендеринга Auto.
Окончание следует…
Источник: https://www.telerik.com/blogs/unified-blazor-web-app-project-template-fully-explained
Основы 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
👍6
День 2081. #BlazorBasics
Основы Blazor. Разбираем Шаблон Проекта Веб-Приложения Blazor. Окончание
1. Основы режимов рендеринга
2. Базовая конфигурация
3. Параметр интерактивности Server
4. Параметр интерактивности WebAssembly
Параметр интерактивности Auto
Автоматическая интерактивная визуализация (см. картинку) будет использовать сервер или WebAssembly для интерактивности в зависимости от ресурсов, доступных на клиенте. Выбор параметра Auto (Server и WebAssembly) даст практически идентичные результаты, как и для интерактивности WebAssembly с соответствующими параметрами Global или Per Page/Component. Основные различия заключаются в файле Program.cs и использовании атрибутов
В серверном проекте файл
```csharp
builder.Services.AddRazorComponents()
.AddInteractiveServerComponents()
.AddInteractiveWebAssemblyComponents();
app.MapRazorComponents<App>()
.AddInteractiveServerRenderMode()
.AddInteractiveWebAssemblyRenderMode()
.AddAdditionalAssemblies(typeof(Counter).Assembly);
``
При выборе опции Global к экземпляру компонента Routes в App.razor применяется атрибут
Для опции Per Page/Component атрибут
Автоматический рендеринг обеспечивает баланс между серверным и WebAsembly режимами. Эта конфигурация подходит для приложений, которым может потребоваться оптимизировать начальное время загрузки приложения.
Примечание о параметре Authentication type (Тип аутентификации)
Параметр создаёт все файлы, необходимые для аутентификации пользователей и управления профилями пользователей. Для получения дополнительной информации по этой теме обратитесь к официальной документации.
Итого
Начало нового проекта Blazor в .NET 8 может показаться сложным на первый взгляд из-за обширного списка шаблонов и параметров. Шаблон Blazor Web App — лучшее решение для приложений Blazor, которые могут использовать статический рендеринг сервера (не PWA и не приложения Blazor Hybrid). Шаблон Blazor Web App объединяет все конфигурации Blazor в одну, предоставляя при этом несколько вариантов для выбора правильной отправной точки. Знание того, какие возможности требуются вашему приложению, определит, какие параметры следует выбрать, но в любом случае Blazor можно перенастроить вручную в любое время, если возникнут новые требования.
Источник: https://www.telerik.com/blogs/unified-blazor-web-app-project-template-fully-explained
Основы Blazor. Разбираем Шаблон Проекта Веб-Приложения Blazor. Окончание
1. Основы режимов рендеринга
2. Базовая конфигурация
3. Параметр интерактивности Server
4. Параметр интерактивности WebAssembly
Параметр интерактивности Auto
Автоматическая интерактивная визуализация (см. картинку) будет использовать сервер или WebAssembly для интерактивности в зависимости от ресурсов, доступных на клиенте. Выбор параметра Auto (Server и WebAssembly) даст практически идентичные результаты, как и для интерактивности WebAssembly с соответствующими параметрами Global или Per Page/Component. Основные различия заключаются в файле Program.cs и использовании атрибутов
rendermode в компонентах.В серверном проекте файл
Program.cs будет вызывать методы для активации интерактивности как WebAssembly, так и Server. Режимы визуализации приложения также настраиваются с помощью методов AddInteractiveWebAssemblyRenderMode и AddInteractiveServerRenderMode. Метод AddAdditionalAssemblies находит компоненты в клиентском приложении, создавая ссылку на серверное приложение.```csharp
builder.Services.AddRazorComponents()
.AddInteractiveServerComponents()
.AddInteractiveWebAssemblyComponents();
app.MapRazorComponents<App>()
.AddInteractiveServerRenderMode()
.AddInteractiveWebAssemblyRenderMode()
.AddAdditionalAssemblies(typeof(Counter).Assembly);
``
При выборе опции Global к экземпляру компонента Routes в App.razor применяется атрибут
InteractiveAuto. Поскольку режим устанавливается на корневом уровне приложения, все компоненты для этой настройки будут сгенерированы в проекте Client.Для опции Per Page/Component атрибут
InteractiveAuto отображается только в компоненте Counter. Все остальные компоненты используют статическую серверную визуализацию и генерируются в проекте Server.Автоматический рендеринг обеспечивает баланс между серверным и WebAsembly режимами. Эта конфигурация подходит для приложений, которым может потребоваться оптимизировать начальное время загрузки приложения.
Примечание о параметре Authentication type (Тип аутентификации)
Параметр создаёт все файлы, необходимые для аутентификации пользователей и управления профилями пользователей. Для получения дополнительной информации по этой теме обратитесь к официальной документации.
Итого
Начало нового проекта Blazor в .NET 8 может показаться сложным на первый взгляд из-за обширного списка шаблонов и параметров. Шаблон Blazor Web App — лучшее решение для приложений Blazor, которые могут использовать статический рендеринг сервера (не PWA и не приложения Blazor Hybrid). Шаблон Blazor Web App объединяет все конфигурации Blazor в одну, предоставляя при этом несколько вариантов для выбора правильной отправной точки. Знание того, какие возможности требуются вашему приложению, определит, какие параметры следует выбрать, но в любом случае Blazor можно перенастроить вручную в любое время, если возникнут новые требования.
Источник: https://www.telerik.com/blogs/unified-blazor-web-app-project-template-fully-explained
👍6