Tryby renderowania Blazor: praktyczny przewodnik

Przed wyborem trybu renderowania

Czym właściwie jest Blazor

Blazor to platforma komponentów firmy Microsoft dla aplikacji internetowych .NET. Tworzysz interfejs użytkownika ze składników Razor, piszesz większość logiki interakcji w języku C# i pozwalasz ASP.NET Core renderować te komponenty na serwerze, w WebAssembly lub w natywnej powłoce aplikacji.

Wyrósł ze starszych pomysłów ASP.NET. Formularze internetowe próbowały ukryć sieć za kontrolą serwera. MVC i Razor Pages stworzyły czystszy kod HTML typu żądanie-odpowiedź. Blazor dodaje komponenty interaktywne wielokrotnego użytku, ale nie powoduje to, że MVC lub Razor Pages stają się przestarzałe w przypadku prostych stron i formularzy z zawartością.

Przed Blazorem

Formularze internetowe, MVC i Razor Pages rozwiązały różne problemy

Formularze internetowe były produktywne, ale ciężkie i stanowe. Strony MVC i Razor zapewniły czystszy kod HTML i prostszą obsługę żądań. Są nadal dobre, gdy strona głównie odczytuje dane, wysyła formularz i zwraca kod HTML. Razor Pages

Co dodaje Blazor

Komponenty utrzymują logikę interfejsu użytkownika blisko znaczników

Składnik Razor może zawierać znaczniki, parametry, zdarzenia, weryfikację, wstrzyknięte usługi i stan lokalny. Jest to przydatne w przypadku pulpitów nawigacyjnych, edytorów, kreatorów, siatek i narzędzi, w których strona zmienia się bez pełnego przeładowania.

Co było dalej

Nowoczesna platforma .NET umożliwia mieszanie trybów renderowania

Nowsze aplikacje Blazor mogą łączyć statyczny kod HTML renderowany przez serwer ze składnikami interaktywnymi. Ma to znaczenie, ponieważ jedna strona może wymagać treści umożliwiającej indeksowanie, podczas gdy inna część potrzebuje aktywnego komponentu.

Spis treści

Zacznij tutaj

Przydatna krótka wersja

Blazor nie jest jedną architekturą. Jest to model jednoskładnikowy z kilkoma trybami renderowania. Właściwy wybór w mniejszym stopniu zależy od składni, a bardziej od stanu, opóźnienia, pamięci i możliwych do przeszukania łączy.

Serwer

Serwer Blazor jest stanowy

Przy pierwszym załadowaniu może wydawać się szybkie, ale serwer utrzymuje obwody pod napięciem. Planuj pamięć, ponownie łącz zachowanie i skaluj w poziomie, zanim ruch wzrośnie.

Przeglądarka

WebAssembly płaci z góry

Usuwa aktywne obwody serwera, ale podczas pierwszej wizyty pobierane jest środowisko wykonawcze i aplikacja. Kwestie buforowania, przycinania i wstępnego renderowania.

Rodzimy

Hybryda to decyzja dotycząca produktu

Używaj hybrydy, gdy aplikacja naprawdę potrzebuje powłoki komputerowej lub mobilnej. W przypadku treści publicznych użyj renderowania internetowego i prawdziwych adresów URL.

Blazor Server

Serwer Blazor utrzymuje pracę pomiędzy kliknięciami

Serwer Blazor nie jest zwykłą bezstanową stroną żądania i odpowiedzi. Podłączona karta przeglądarki otrzymuje obwód. Serwer przechowuje stan komponentów i usługi o określonym zakresie dla tego obwodu, gdy użytkownik jest podłączony, a często przez krótki czas ponownego połączenia po rozłączeniu.

Pamięć rośnie wraz z aktywnymi obwodami

Każda podłączona zakładka ma obwód. Stan komponentu, usługi o określonym zakresie, stan sprawdzania poprawności i oczekujące prace interfejsu użytkownika mogą pozostać w pamięci do momentu zakończenia obwodu. Testy obciążenia muszą liczyć aktywnych użytkowników, a nie tylko żądania na sekundę.

Opóźnienie staje się częścią interfejsu użytkownika

Kliknięcie przycisku, zdarzenie wejściowe lub interakcja z siatką mogą zostać przesłane do serwera i z powrotem. Hostuj blisko użytkowników i unikaj rozmów, gdy odbiorcy są rozproszeni po różnych regionach.

Skalowanie w poziomie wymaga planu

Wiele wystąpień aplikacji często wymaga trwałych sesji, planu sygnalizującego, usługi Azure Signal Service lub starannego projektowania stanu. W przeciwnym razie nastąpi ponowne połączenie, a obwody pod napięciem mogą wylądować w niewłaściwej instancji.

Dobre dopasowanie: kontrolowani użytkownicy

Blazor Server najlepiej sprawdza się w przypadku uwierzytelnionych narzędzi, ekranów administracyjnych, pulpitów nawigacyjnych i aplikacji wewnętrznych, w których znane są użytkownicy, opóźnienia i pojemność hostingu.

Blazor WebAssembly

WebAssembly przenosi koszt na pierwsze ładowanie

Blazor WebAssembly usuwa obwody serwera, ale nie zmniejsza kosztów. Przeglądarka musi pobrać środowisko uruchomieniowe platformy .NET, zestawy, zasoby lokalizacyjne i zasoby aplikacji, aby korzystanie z niej było szybkie. Powtarzające się wizyty mogą być dobre, ponieważ pomaga buforowanie. Pierwsze wizyty wymagają opieki.

Pierwszym obciążeniem jest podatek

Przeglądarka pobiera środowisko uruchomieniowe platformy .NET, zestawy aplikacji, zasoby i zasoby statyczne. Przycinanie pomaga. Kompilacja z wyprzedzeniem może usprawnić pracę obciążającą procesor, ale często zwiększa rozmiar pobieranych plików.

Sekrety nie mogą mieszkać w kliencie

Aplikacja WebAssembly działa w przeglądarce użytkownika. Traktuj go jak każdy publiczny frontend: przechowuj tajemnice na serwerze, chroń interfejsy API i zakładaj, że kod klienta może zostać sprawdzony.

SEO wymaga renderowanej treści

W przypadku artykułów publicznych, stron produktów i stron docelowych nie należy polegać na pustej powłoce, która staje się użyteczna dopiero po uruchomieniu zestawu WebAssembly. Użyj renderowania po stronie serwera, renderowania wstępnego, renderowania statycznego lub oddzielnej ścieżki zawartości.

Dobre dopasowanie: aplikacje działające w trybie offline lub wymagające dużej liczby klientów

WebAssembly działa dobrze, gdy użytkownicy często wracają, potrzebują działania w trybie offline lub wykonują ciężką pracę po stronie klienta, gdzie podróż w obie strony z serwerem byłaby gorsza.

Hybrydowy i WebView

Hybryda jest przeznaczona dla aplikacji, a nie publicznych stron docelowych

Blazor Hybrid jest przydatny, gdy zespół .NET chce ponownie wykorzystać składniki w aplikacji klasycznej lub mobilnej. Działa w natywnej powłoce za pośrednictwem WebView, dzięki czemu może znajdować się blisko plików lokalnych, interfejsów API urządzeń i wdrożeń w przedsiębiorstwie. Nie jest to skrót dla witryn zorientowanych na SEO.

Korzystaj z wersji hybrydowej, gdy potrzebujesz dostępu do plików lokalnych, interfejsów API urządzeń, wdrażania komputerów stacjonarnych lub pakietów mobilnych.
Nie wybieraj opcji Hybrydowej tylko do ponownego wykorzystania komponentów sieciowych. Natywna powłoka dodaje funkcje aktualizacji, przechowywania, podpisywania i wsparcia.
W przypadku SEO i udostępnianych publicznych adresów URL hybryda jest zwykle niewłaściwą powierzchnią.

Routing wielojęzyczny

Linki świadome kulturowo muszą być linkami rzeczywistymi

Wielojęzyczna witryna Blazor nie powinna tworzyć nawigacji językowej tylko w modułach obsługi kliknięć lub JavaScript, gdy strona stanie się interaktywna. Wyszukiwarki i użytkownicy potrzebują prawdziwych znaczników zakotwiczeń w początkowym kodzie HTML, ze stabilnymi wartościami href, kanonicznymi adresami URL i danymi hreflang.

Używaj linków do stron centralnych i pomocników zamiast ręcznie tworzonych ciągów, takich jak ścieżka ukośnika kultury ukośnika.
Renderuj linki językowe jako znaczniki zakotwiczone z wartościami href podczas początkowego renderowania HTML.
Synchronizuj kanoniczne adresy URL, adresy URL hreflang i nawigację w widocznym języku.
Unikaj ukrywania ważnych linków za modułami obsługi onclick, opóźnionym JavaScriptem lub interaktywnym stanem Blazor.

Przewodnik decyzyjny

Wybierz według wąskiego gardła, które akceptujesz

Każdy tryb renderowania przenosi nacisk w inne miejsce. Wybierz presję, którą możesz zmierzyć, przyjąć i wyjaśnić zespołowi.

Wybierz Serwer

Kiedy pierwsze ładowanie i integracja backendu .NET mają największe znaczenie

Wybierz serwer Blazor do kontrolowanych, uwierzytelnionych aplikacji, w których pamięć serwera, połączenia na żywo i opóźnienia regionalne stanowią akceptowalne koszty operacyjne.

Wybierz WebAssembly

Kiedy najważniejsza jest praca klienta i zachowanie offline

Wybierz WebAssembly, gdy powtarzające się wizyty, buforowanie, użycie w trybie offline lub lokalna praca procesora są ważniejsze niż najmniejsze pierwsze ładowanie.

Wybierz hybrydę

Gdy produkt jest naprawdę aplikacją natywną

Wybierz opcję Hybrid, jeśli aplikacja znajduje się na komputerze stacjonarnym lub urządzeniu mobilnym i wymaga integracji lokalnej bardziej niż zasięgu publicznej sieci Web.

Wybierz strony MVC lub Razor

Gdy witryna składa się głównie z dokumentów i formularzy

Klasyczne strony MVC lub Razor ASP.NET Core są często prostsze w przypadku witryn z dużą zawartością zawartości, dokumentacji publicznej i formularzy o ograniczonej interaktywności.

Sekcja referencyjna

Przeczytaj je dalej, kiedy będziesz budować to naprawdę

Te odniesienia są przydatne po podjęciu decyzji dotyczącej architektury, ponieważ obejmują części, które sprawiają, że strona Blazor jest niezawodna w środowisku produkcyjnym: metadane, łącza językowe, hosting i interfejs użytkownika wielokrotnego użytku.

Komponent metadanych SEO dla Blazor

Użyj tej opcji, gdy każda strona wymaga spójnego tytułu, opisu, formatu Open Graph, danych kanonicznych i danych wyjściowych w formacie JSON-LD.

SEO-przyjazne linki język-region

Użyj tej opcji, gdy routing wielojęzyczny wymaga prawdziwych linków, które można przeszukiwać, stabilnych ścieżek kulturowych i prawidłowego wyniku hreflang.

Hostuj Blazor na UpCloud

Użyj tej opcji, gdy aplikacja Blazor Server wymaga małego VPS, Nginx, TLS, systemd, dzienników, kopii zapasowych i powtarzalnych wdrożeń.

TablerForNet

Użyj tej opcji, gdy wartością jest interfejs administratora, tabele danych, formularze i ekrany pulpitu nawigacyjnego, a nie strona marketingowa.

Blazor

Użyj centrum Blazor, jeśli chcesz, aby powiązane przewodniki znajdowały się w jednym miejscu przed wybraniem kolejnych szczegółów implementacji.

Najczęstsze pytania

Dlaczego serwer Blazor może potrzebować więcej pamięci niż MVC?

MVC może zakończyć żądanie i zwolnić większość stanu żądania. Serwer Blazor utrzymuje obwód dla każdej podłączonej karty przeglądarki, dzięki czemu stan komponentów i usługi o określonym zakresie mogą pozostać aktywne między kliknięciami.

Czy mogę uruchomić Blazor Server w wielu wystąpieniach aplikacji?

Tak, ale planuj to świadomie. Obwody pod napięciem i połączenia sygnalizujące wymagają stabilnego routingu, płyty montażowej lub zarządzanej usługi sygnalizującej oraz stanu aplikacji, który przetrwa ponowne połączenie.

Czy Blazor WebAssembly może być przyjazny dla SEO?

Tak, ale nie wysyłając pustej powłoki i mając nadzieję, że robot poczeka. Strony publiczne wymagają wyrenderowanego kodu HTML, metadanych, linków kanonicznych i danych strukturalnych przed pierwszą odpowiedzią lub w jej trakcie.

Jak należy budować wielojęzyczne łącza Blazor?

Użyj definicji tras centralnych i renderuj prawdziwe znaczniki kotwiczące dla każdej kultury. Utrzymuj spójne widoczne linki, kanoniczne adresy URL i dane hreflang, aby użytkownicy i roboty indeksujące widziały tę samą strukturę językową.