Практическое руководство по принятию решений Blazor
Blazor: сервер, веб-сборка или гибрид?
Blazor полезен, когда вы знаете, какая работа остается на сервере, какая работа перемещается в браузер и какие URL-адреса должны существовать как настоящие HTML-ссылки.
В этом руководстве отсутствует версия брошюры. В нем основное внимание уделяется компромиссам, которые обычно удивляют команды позже: память сервера, активные соединения, задержка, размер полезной нагрузки, SEO и многоязычная маршрутизация.
Перед выбором режима рендеринга
Что такое Блазор на самом деле Blazor
Blazor — это компонентная платформа Microsoft для веб-приложений .NET. Вы создаете пользовательский интерфейс из компонентов Razor, пишете большую часть логики взаимодействия на C# и позволяете ASP.NET Core отображать эти компоненты на сервере, в WebAssembly или внутри собственной оболочки приложения.
Он вырос из старых идей ASP.NET. Веб-формы пытались скрыть Интернет за серверными элементами управления. MVC и Razor Pages сделали HTML-код запросов и ответов более чистым. Blazor добавляет интерактивные компоненты многократного использования, но это не делает MVC или Razor Pages устаревшими для простых страниц и форм с содержимым.
Веб-формы, MVC и Razor Pages решили разные проблемы
Веб-формы были продуктивными, но тяжелыми и сохраняли состояние. MVC и Razor Pages обеспечили более чистый HTML и упростили обработку запросов. Они по-прежнему хороши, когда страница в основном считывает данные, отправляет форму и возвращает HTML.
Компоненты сохраняют логику пользовательского интерфейса близкой к разметке.
Компонент Razor может содержать разметку, параметры, события, проверки, внедренные службы и локальное состояние. Это полезно для информационных панелей, редакторов, мастеров, сеток и инструментов, в которых страница изменяется без полной перезагрузки.
Современный .NET позволяет смешивать режимы рендеринга.
Новые приложения Blazor могут сочетать статический HTML-код, отображаемый на сервере, с интерактивными компонентами. Это важно, поскольку одной странице может потребоваться сканируемый контент, а другой части — активный компонент.
Содержание
Начните здесь
Полезная короткая версия
Blazor — это не одна архитектура. Это однокомпонентная модель с несколькими режимами рендеринга. Правильный выбор зависит не столько от синтаксиса, сколько от того, где находятся состояние, задержка, память и ссылки, доступные для сканирования.
Blazor Server имеет состояние
При первой загрузке он может показаться быстрым, но сервер поддерживает цепи под напряжением. Планируйте использование памяти, поведение при повторном подключении и горизонтальное масштабирование до того, как трафик вырастет.
WebAssembly платит вперед
Он удаляет действующие серверные цепи, но при первом посещении загружается среда выполнения и приложение. Кэш, обрезка и предварительный рендеринг имеют значение.
Гибрид – это продуктовое решение
Используйте Hybrid, когда приложению действительно нужна оболочка для настольного компьютера или мобильного устройства. Для общедоступного контента используйте веб-рендеринг и реальные URL-адреса.
Blazor Server
Blazor Server поддерживает работу между щелчками мыши
Blazor Server — это не обычная страница запроса-ответа без сохранения состояния. Подключенная вкладка браузера получает схему. Сервер сохраняет состояние компонента и службы для этого канала, пока пользователь подключен, и часто в течение короткого окна повторного подключения после отключения.
Память растет вместе с активными цепями
Каждая подключенная вкладка имеет схему. Состояние компонента, службы с заданной областью действия, состояние проверки и ожидающая работа пользовательского интерфейса могут оставаться в памяти до тех пор, пока цепь не завершится. Нагрузочные тесты должны учитывать активных пользователей, а не только количество запросов в секунду.
Задержка становится частью пользовательского интерфейса
Нажатие кнопки, событие ввода или взаимодействие с сеткой могут передаваться на сервер и обратно. Размещайте контент ближе к пользователям и избегайте болтливых компонентов, когда аудитория распределена по регионам.
Для масштабирования нужен план
Многим экземплярам приложений часто требуются закрепленные сеансы, объединительная плата SignalR, служба Azure SignalR или тщательное проектирование состояний. В противном случае происходит повторное подключение и активные цепи могут оказаться не в том экземпляре.
Хорошее соответствие: контролируемые пользователи
Blazor Server лучше всего подходит для аутентифицированных инструментов, экранов администратора, информационных панелей и внутренних приложений, где известны пользователи, задержка и мощность хостинга.
Blazor WebAssembly
WebAssembly переносит затраты на первую загрузку
Blazor WebAssembly удаляет серверные схемы, но не снижает затраты. Браузер должен загрузить среду выполнения .NET, сборки, ресурсы локализации и ресурсы приложения, прежде чем работа станет быстрой. Повторные посещения могут быть полезны, поскольку помогает кэширование. Первые посещения требуют осторожности.
Первая загрузка - это налог
Браузер загружает среду выполнения .NET, сборки приложений, ресурсы и статические ресурсы. Обрезка помогает. Предварительная компиляция может улучшить нагрузку на процессор, но часто увеличивает размер загрузки.
Секреты не могут жить в клиенте
Приложение WebAssembly запускается в браузере пользователя. Относитесь к нему как к любому общедоступному интерфейсу: храните секреты на сервере, защищайте API и допускайте возможность проверки клиентского кода.
SEO нуждается в визуализированном контенте
Для общедоступных статей, страниц продуктов и целевых страниц не полагайтесь на пустую оболочку, которая станет полезной только после запуска WebAssembly. Используйте рендеринг на стороне сервера, предварительный рендеринг, статический рендеринг или отдельный путь к контенту.
Подходит: офлайн-приложения или приложения с большим количеством клиентов.
WebAssembly работает хорошо, когда пользователи часто возвращаются, нуждаются в автономном режиме или выполняют тяжелую работу на стороне клиента, где обращение к серверу туда и обратно будет хуже.
Гибрид и веб-просмотр
Гибрид предназначен для приложений, а не для общедоступных целевых страниц.
Blazor Hybrid полезен, когда команда .NET хочет повторно использовать компоненты внутри настольного или мобильного приложения. Он запускается в собственной оболочке через WebView, поэтому может быть близок к локальным файлам, API-интерфейсам устройств и корпоративному развертыванию. Это не ярлык для веб-сайтов, ориентированных на SEO.
- Используйте гибридный режим, если вам нужен доступ к локальным файлам, API-интерфейсам устройств, развертыванию настольных компьютеров или мобильным пакетам.
- Не выбирайте гибридный вариант только для повторного использования веб-компонентов. Собственная оболочка добавляет функции обновления, хранения, подписи и поддержки.
- Для SEO и общих общедоступных URL-адресов гибрид обычно не подходит.
Многоязычная маршрутизация
Культурно-ориентированные связи должны быть реальными
Многоязычный сайт Blazor не должен создавать языковую навигацию только в обработчиках кликов или JavaScript после того, как страница станет интерактивной. Поисковым системам и пользователям нужны настоящие теги привязки в исходном HTML со стабильными значениями href, каноническими URL-адресами и данными hreflang.
- Используйте ссылки и помощники на центральные страницы вместо строк, созданных вручную, таких как косая черта.
- Языковые ссылки визуализируются как теги привязки со значениями href во время первоначальной визуализации HTML.
- Синхронизируйте канонические URL-адреса, URL-адреса hreflang и видимую языковую навигацию.
- Не скрывайте важные ссылки за обработчиками onclick, отложенным JavaScript или интерактивным состоянием Blazor.
Руководство по выбору
Выберите узкое место, которое вы принимаете
Каждый режим рендеринга перемещает давление в другое место. Выберите давление, которое вы можете измерить, принять и объяснить команде.
Когда первая загрузка и интеграция с серверной частью .NET имеют наибольшее значение
Выбирайте Blazor Server для приложений с контролируемой проверкой подлинности, где память сервера, активные соединения и региональная задержка являются приемлемыми эксплуатационными расходами.
Когда важнее всего работа с клиентом и поведение в оффлайне
Выбирайте WebAssembly, когда повторные посещения, кэширование, автономное использование или работа локального процессора важнее минимальной первой загрузки.
Когда продукт действительно нативное приложение
Выбирайте гибридный вариант, если приложение предназначено для настольных компьютеров или мобильных устройств и требует локальной интеграции, а не общедоступного доступа в Интернет.
Когда на сайте в основном документы и формы
Классические страницы ASP.NET Core MVC или Razor часто проще использовать для сайтов с большим количеством контента, общедоступной документации и форм с ограниченной интерактивностью.
Справочный раздел
Прочитайте это дальше, когда вы построите это по-настоящему.
Эти ссылки полезны после принятия решения об архитектуре, поскольку они охватывают части, которые делают страницу Blazor надежной в рабочей среде: метаданные, языковые ссылки, хостинг и повторно используемый пользовательский интерфейс.
Используйте это, когда каждой странице требуется единообразный заголовок, описание, открытый график, канонический вывод и вывод JSON-LD.
SEO-дружественные ссылки с localeИспользуйте это, когда многоязычная маршрутизация требует реальных ссылок для сканирования, стабильных культурных путей и правильного вывода hreflang.
Разместить Blazor на UpCloudИспользуйте это, когда серверному приложению Blazor требуется небольшой VPS, Nginx, TLS, systemd, журналы, резервные копии и повторяемые развертывания.
TablerForNetИспользуйте это значение, когда значением является интерфейс администратора, таблицы данных, формы и экраны информационной панели, а не маркетинговая страница.
BlazorИспользуйте концентратор Blazor, если вы хотите, чтобы соответствующие руководства были в одном месте, прежде чем выбирать следующую деталь реализации.
Частые вопросы
Почему серверу Blazor может потребоваться больше памяти, чем MVC?
MVC может завершить запрос и освободить большую часть состояния запроса. Blazor Server сохраняет цепь для каждой подключенной вкладки браузера, поэтому состояние компонента и службы с ограниченной областью действия могут оставаться активными между щелчками мыши.
Могу ли я запустить Blazor Server в нескольких экземплярах приложения?
Да, но планируйте это сознательно. Для активных каналов и соединений SignalR требуется стабильная маршрутизация, объединительная плата или управляемая служба SignalR, а также состояние приложения, которое правильно выдерживает повторное подключение.
Может ли Blazor WebAssembly быть оптимизированным для SEO?
Да, но не отправляя пустую оболочку и надеясь, что сканер подождет. Публичным страницам необходимо отображать HTML, метаданные, канонические ссылки и структурированные данные до или во время первого ответа.
Как следует создавать многоязычные ссылки Blazor?
Используйте центральные определения маршрутов и визуализируйте настоящие теги привязки для каждого языка и региональных параметров. Сохраняйте видимые ссылки, канонические URL-адреса и данные hreflang согласованными, чтобы пользователи и сканеры видели одну и ту же языковую структуру.