ASP.NET Core Blazor hostingmodellen

In dit artikel wordt uitgelegd Blazor hostingmodellen, voornamelijk gericht op Blazor Server en Blazor WebAssembly apps in versies van .NET ouder dan .NET 8. De richtlijnen in dit artikel zijn relevant in alle .NET-releases voor Blazor Hybrid apps die worden uitgevoerd op systeemeigen mobiele en desktopplatforms. Blazor Web Apps in .NET 8 of hoger worden beter begrepen door de manier waarop Razor onderdelen worden weergegeven, wat wordt beschreven in hun weergavemodus. Rendermodi worden kort besproken in het overzichtsartikel Fundamentals en worden uitgebreid besproken in ASP.NET Core Blazor rendermodi van het knooppunt Components.

Blazor is een webframework voor het bouwen van webinterfaceonderdelen (Razor onderdelen) die op verschillende manieren kunnen worden gehost. Razor onderdelen kunnen aan de serverzijde uitvoeren in ASP.NET Core (Blazor Server) versus aan de clientzijde in de browser op de WebAssembly-.NET-runtime (Blazor WebAssembly, Blazor WASM-). U kunt ook Razor-componenten hosten in native mobiele apps en desktop-apps die worden weergegeven in een ingesloten Web View-controle (Blazor Hybrid). Ongeacht het hostingmodel is de manier waarop u Razor onderdelen bouwt hetzelfde. Dezelfde Razor-onderdelen kunnen ongewijzigd worden gebruikt met elk van de hostingmodellen.

Blazor Server

Met het Blazor Server hostingmodel worden onderdelen uitgevoerd op de server vanuit een ASP.NET Core-app. Ui-updates, gebeurtenisafhandeling en JavaScript-aanroepen worden verwerkt via een SignalR verbinding met behulp van het WebSockets-protocol. De status op de server die aan elke verbonden client is gekoppeld, wordt een circuitgenoemd. Circuits zijn niet gekoppeld aan een specifieke netwerkverbinding en kunnen tijdelijke netwerkonderbrekingen tolereren en pogingen van de client om opnieuw verbinding te maken met de server wanneer de verbinding is verbroken.

In een traditionele serverweergave-app wordt het openen van dezelfde app in meerdere browserschermen (tabbladen of iframes) doorgaans niet omgezet in aanvullende resourcevereisten op de server. Voor het Blazor Server hostingmodel vereist elk browserscherm een afzonderlijk circuit en afzonderlijke exemplaren van de status van door de server beheerde onderdelen. Blazor beschouwt het sluiten van een browsertabblad of het navigeren naar een externe URL een fatsoenlijke beëindiging. In het geval van een probleemloze beëindiging worden het circuit en de bijbehorende resources onmiddellijk vrijgegeven. Een client kan ook niet op de juiste manier ontkoppelen, bijvoorbeeld vanwege een netwerkonderbreking. Blazor Server slaat niet-verbonden circuits op voor een configureerbaar interval, zodat de client opnieuw verbinding kan maken.

Op de client brengt het Blazor script de SignalR verbinding met de server tot stand. Het script wordt geleverd vanuit een ingesloten resource in het gedeelde ASP.NET Core-framework.

Het Blazor Server hostingmodel biedt verschillende voordelen:

• De downloadgrootte is aanzienlijk kleiner dan wanneer het Blazor WebAssembly hostingmodel wordt gebruikt en de app veel sneller wordt geladen.
• De app maakt optimaal gebruik van servermogelijkheden, waaronder het gebruik van .NET Core-API's.
• .NET Core op de server wordt gebruikt om de app uit te voeren, dus bestaande .NET-hulpprogramma's, zoals foutopsporing, werken zoals verwacht.
• Thin clients worden ondersteund. Blazor Server werkt bijvoorbeeld met browsers die webassembly en op apparaten met beperkte resources niet ondersteunen.
• De .NET/C#-codebasis van de app, inclusief de onderdeelcode van de app, wordt niet aan clients geleverd.

Het Blazor Server hostingmodel heeft de volgende beperkingen:

• Er bestaat meestal een hogere latentie. Elke gebruikersinteractie omvat een netwerkhop.
• Er is geen offlineondersteuning. Als de clientverbinding mislukt, mislukt de interactiviteit.
• Voor het schalen van apps met veel gebruikers zijn serverbronnen vereist voor het afhandelen van meerdere clientverbindingen en clientstatus.
• Er is een ASP.NET Core-server vereist om de app te bedienen. Serverloze implementatiescenario's zijn niet mogelijk, zoals het leveren van de app vanuit een CDN (Content Delivery Network).

U wordt aangeraden de Azure SignalR Service- te gebruiken voor apps die gebruikmaken van het Blazor Server hostingmodel. Met de service kunt u een Blazor Server-app omhoog schalen naar een groot aantal gelijktijdige SignalR verbindingen.

Blazor WebAssembly

Met het Blazor WebAssembly hostingmodel worden onderdelen aan de clientzijde van de browser uitgevoerd op een .NET-runtime op basis van WebAssembly. Razor onderdelen, hun afhankelijkheden en de .NET-runtime worden gedownload naar de browser. Onderdelen worden rechtstreeks uitgevoerd op de gebruikersinterface-thread van de browser. Updates van gebruikersinterfaces en gebeurtenisafhandeling vinden plaats binnen hetzelfde proces. Assets worden geïmplementeerd als statische bestanden op een webserver of service die statische inhoud aan clients kan leveren.

Blazor web-apps kunnen het Blazor WebAssembly hostingmodel gebruiken om interactiviteit aan de clientzijde in te schakelen. Wanneer een app wordt gemaakt die uitsluitend wordt uitgevoerd op het Blazor WebAssembly hostingmodel zonder rendering en interactiviteit op de server, wordt de app een zelfstandigeBlazor WebAssembly-app genoemd.

Wanneer een zelfstandige Blazor WebAssembly-app een back-end ASP.NET Core-app gebruikt om de bestanden te verwerken, wordt de app een gehosteBlazor WebAssembly-app genoemd. Met behulp van gehoste Blazor WebAssemblykrijgt u een volledige webontwikkelingservaring met .NET, waaronder de mogelijkheid om code te delen tussen de client- en server-apps, ondersteuning voor prerendering en integratie met MVC en Razor Pages. Een gehoste client-app kan communiceren met de back-endserver-app via het netwerk met behulp van verschillende berichtenframeworks en protocollen, zoals web-API, gRPC-web-en SignalR (Gebruik ASP.NET Core SignalR met Blazor).

Een Blazor WebAssembly-app die is gebouwd als een Progressive Web App (PWA) moderne browser-API's gebruikt om veel van de mogelijkheden van een systeemeigen client-app mogelijk te maken, zoals offline werken, in een eigen app-venster te worden uitgevoerd, te starten vanaf het besturingssysteem van de host, pushmeldingen te ontvangen en automatisch op de achtergrond bij te werken.

Het Blazor script verwerkt:

• Bezig met het downloaden van de .NET-runtime, Razor-componenten en afhankelijkheden.
• Initialisatie van runtime.

De grootte van de gepubliceerde app, de nettoladingsgrootte, is een kritieke prestatiefactor voor de bruikbaarheid van een app. Het downloaden van een grote app naar een browser duurt relatief lang, wat de gebruikerservaring vermindert. Blazor WebAssembly optimaliseert de nettoladinggrootte om de downloadtijden te verminderen:

• Ongebruikte code wordt uit de app verwijderd wanneer deze wordt gepubliceerd door de Intermediate Language (IL) Trimmer.
• HTTP-antwoorden worden gecomprimeerd.
• De .NET-runtime en assembly's worden in de cache opgeslagen in de browser.

Het Blazor WebAssembly hostingmodel biedt verschillende voordelen:

• Voor zelfstandige Blazor WebAssembly-apps is er geen afhankelijkheid aan de .NET-serverzijde nadat de app is gedownload van de server, zodat de app functioneel blijft als de server offline gaat.
• Clientbronnen en -mogelijkheden worden volledig gebruikt.
• Werk wordt van de server naar de client ge offload.
• Voor zelfstandige Blazor WebAssembly-apps is een ASP.NET Core-webserver niet vereist om de app te hosten. Serverloze implementatiescenario's zijn mogelijk, zoals het leveren van de app vanuit een CDN (Content Delivery Network).

Het Blazor WebAssembly hostingmodel heeft de volgende beperkingen:

• Razor onderdelen zijn beperkt tot de mogelijkheden van de browser.
• Ondersteuning voor clienthardware en -software (bijvoorbeeld webassembly-ondersteuning) is vereist.
• Downloadgrootte is groter en onderdelen duren langer om te laden.
• Code die naar de client wordt verzonden, kan niet worden beschermd tegen inspectie en manipulatie door gebruikers.

De .NET Intermediate Language (IL) interpreter bevat gedeeltelijke Just-In-Time-ondersteuning (JIT) runtime om betere runtimeprestaties te bereiken. De JIT-interpreter optimaliseert de uitvoering van interpreter-bytecodes door deze te vervangen door kleine blobs van WebAssembly-code. De JIT-interpreter wordt automatisch ingeschakeld voor Blazor WebAssembly apps, met uitzondering van foutopsporing.

Blazor biedt ondersteuning voor AOT-compilatie (ahead-of-time), waar u uw .NET-code rechtstreeks in WebAssembly kunt compileren. AOT-compilatie resulteert in runtime-prestatieverbeteringen ten koste van een grotere app-grootte. Voor meer informatie, zie ASP.NET Core Blazor WebAssembly build tools en ahead-of-time (AOT) compilatie.

Dezelfde .NET WebAssembly-buildhulpprogramma's die gebruikt voor AOT-compilatie, de .NET WebAssembly-runtime opnieuw koppelen om ongebruikte runtimecode te knippen. Blazor verwijdert ook ongebruikte code uit .NET Framework-bibliotheken. De .NET-compiler precomprimeert een zelfstandige Blazor WebAssembly-app voor een kleinere nettolading van apps.

Door WebAssembly gerenderde Razor onderdelen kunnen systeemeigen afhankelijkheden gebruiken gebouwd om te worden uitgevoerd op WebAssembly.

Blazor Hybrid

Blazor kan ook worden gebruikt om systeemeigen client-apps te bouwen met behulp van een hybride benadering. Hybride apps zijn systeemeigen apps die gebruikmaken van webtechnologieën voor hun functionaliteit. In een Blazor Hybrid-app worden de Razor-onderdelen rechtstreeks uitgevoerd in de systeemeigen app (niet op WebAssembly), samen met andere .NET-code. De webgebruikersinterface wordt gebaseerd op HTML en CSS weergegeven in een ingebed Web View-besturingselement via een lokaal interoperabiliteitskanaal.

Blazor Hybrid apps kunnen worden gebouwd met behulp van verschillende systeemeigen .NET-app-frameworks, waaronder .NET MAUI, WPF en Windows Forms. Blazor biedt BlazorWebView besturingselementen voor het toevoegen van Razor onderdelen aan apps die zijn gebouwd met deze frameworks. Het gebruik van Blazor met .NET MAUI biedt een handige manier om platformoverschrijdende Blazor Hybrid-apps te bouwen voor mobiel en desktop, terwijl Blazor integratie met WPF en Windows Forms een uitstekende manier is om bestaande apps te moderniseren.

Omdat Blazor Hybrid apps systeemeigen apps zijn, kunnen ze functionaliteit ondersteunen die niet beschikbaar is met alleen het webplatform. Blazor Hybrid apps volledige toegang hebben tot systeemeigen platformmogelijkheden via normale .NET-API's. Blazor Hybrid apps kunnen ook onderdelen delen en opnieuw gebruiken met bestaande Blazor Server- of Blazor WebAssembly-apps. Blazor Hybrid apps combineren de voordelen van het web, systeemeigen apps en het .NET-platform.

Het Blazor Hybrid hostingmodel biedt verschillende voordelen:

• Bestaande onderdelen hergebruiken die kunnen worden gedeeld via mobiel, desktop en internet.
• Maak gebruik van vaardigheden, ervaring en resources voor webontwikkeling.
• Apps hebben volledige toegang tot de systeemeigen mogelijkheden van het apparaat.

Het Blazor Hybrid hostingmodel heeft de volgende beperkingen:

• Afzonderlijke systeemeigen client-apps moeten worden gebouwd, geïmplementeerd en onderhouden voor elk doelplatform.
• Het duurt meestal langer om native client-apps te vinden, te downloaden en te installeren dan toegang tot een web-app in een browser.

Zie ASP.NET Core Blazor Hybridvoor meer informatie.

Zie de volgende bronnen voor meer informatie over systeemeigen clientframeworks van Microsoft:

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

Welk Blazor hostingmodel moet ik kiezen?

Het hostingmodel van een onderdeel wordt ingesteld door de weergavemodus, hetzij tijdens compileren of runtime, die wordt beschreven met voorbeelden in ASP.NET Core Blazor rendermodi. In de volgende tabel ziet u de belangrijkste overwegingen voor het instellen van de rendermodus om het hostingmodel van een onderdeel te bepalen. Voor zelfstandige Blazor WebAssembly-apps worden alle onderdelen van de app weergegeven op de client met het Blazor WebAssembly hostingmodel.

Blazor Hybrid apps omvatten .NET MAUI, WPF en Windows Forms Framework-apps.

Kenmerk	Blazor Server	Blazor WebAssembly (WASM)	Blazor Hybrid
volledige .NET API-compatibiliteit	✔️ Ondersteund	❌ Niet ondersteund	✔️ Ondersteund
Directe toegang tot server- en netwerkbronnen	✔️ Ondersteunde	❌ niet ondersteund†	❌ niet ondersteund†
kleine nettolading met een snelle initiële laadtijd	✔️ Ondersteunde	❌ Niet ondersteund	❌ Niet ondersteund
bijna systeemeigen uitvoeringssnelheid	✔️ Ondersteund	✔️ Ondersteund‡	✔️ Ondersteund
App-code beveiligd en privé op de server	✔️ Ondersteunde	❌ niet ondersteund†	❌ niet ondersteund†
apps offline uitvoeren nadat is gedownload	❌ Niet ondersteund	✔️ Ondersteunde	✔️ Ondersteunde
statische site die als host fungeert voor	❌ Niet ondersteund	✔️ Ondersteund	❌ Niet ondersteund
Draagt verwerking over naar klanten	❌ Niet ondersteund	✔️ Ondersteund	✔️ Ondersteunde
volledige toegang tot systeemeigen clientmogelijkheden	❌ Niet ondersteund	❌ Niet ondersteund	Ondersteunde ✔️
webgebaseerde implementatie	Ondersteunde ✔️	✔️ ondersteunde	❌ Niet ondersteund

†Blazor WebAssembly- en Blazor Hybrid-apps kunnen server-API's gebruiken om toegang te krijgen tot server-/netwerkbronnen en toegang te krijgen tot persoonlijke en beveiligde app-code.
‡Blazor WebAssembly alleen bijna systeemeigen prestaties bereikt met vooraf (AOT) compilatie.

Nadat u het hostingmodel van de app hebt gekozen, kunt u een Blazor Server of Blazor WebAssembly app genereren op basis van een Blazor projectsjabloon. Zie Hulpprogramma's voor ASP.NET Core Blazorvoor meer informatie.

Als u een Blazor Hybrid-app wilt maken, raadpleegt u de artikelen onder ASP.NET Core Blazor Hybrid zelfstudies.

Volledige .NET API-compatibiliteit

Onderdelen die worden weergegeven voor het Blazor Server hostingmodel en Blazor Hybrid-apps hebben volledige .NET API-compatibiliteit, terwijl onderdelen die voor Blazor WebAssembly worden weergegeven, beperkt zijn tot een subset van .NET-API's. Wanneer voor de specificatie van een app een of meer .NET-API's zijn vereist die niet beschikbaar zijn voor door WebAssembly gerenderde onderdelen, kiest u er vervolgens voor om onderdelen weer te geven voor Blazor Server of Blazor Hybridte gebruiken.

Directe toegang tot server- en netwerkbronnen

Onderdelen die worden weergegeven voor het Blazor Server hostingmodel, hebben directe toegang tot server- en netwerkbronnen waar de app wordt uitgevoerd. Omdat onderdelen die worden gehost met Blazor WebAssembly of Blazor Hybrid worden uitgevoerd op een client, hebben ze geen directe toegang tot server- en netwerkbronnen. Onderdelen hebben indirect toegang tot server- en netwerkbronnen via beveiligde server-API's. Server-API's zijn mogelijk beschikbaar via bibliotheken, pakketten en services van derden. Neem rekening met de volgende overwegingen:

• Bibliotheken, pakketten en services van derden kunnen kostbaar zijn voor het implementeren en onderhouden, zwak ondersteund of introduceren van beveiligingsrisico's.
• Als een of meer server-API's intern door uw organisatie worden ontwikkeld, zijn er extra resources nodig om ze te bouwen en te onderhouden.

Gebruik het Blazor Server hostingmodel om te voorkomen dat API's uit de serveromgeving beschikbaar moeten worden gesteld.

Kleine nettoladinggrootte met snelle initiële laadtijd

Het weergeven van onderdelen van de server vermindert de nettolading van de app en verbetert de initiële laadtijden. Wanneer u een snelle initiële laadtijd wilt, gebruik het Blazor Server hostingmodel of overweeg statische serverside rendering.

Bijna systeemeigen uitvoeringssnelheid

Blazor Hybrid apps worden uitgevoerd met behulp van de .NET-runtime op het doelplatform, dat de best mogelijke snelheid biedt.

Onderdelen die worden weergegeven voor het Blazor WebAssembly hostingmodel, waaronder Progressive Web Apps (PWA's) en zelfstandige Blazor WebAssembly-apps worden uitgevoerd met behulp van de .NET-runtime voor WebAssembly, wat langzamer is dan rechtstreeks op het platform wordt uitgevoerd. Overweeg het gebruik van vooraf gecompileerde AOT- om runtimeprestaties te verbeteren bij het gebruik van Blazor WebAssembly.

App-code veilig en privé op de server

Het veilig en privé onderhouden van app-code op de server is een ingebouwde functie van onderdelen die worden weergegeven voor het Blazor Server hostingmodel. Onderdelen die worden weergegeven met behulp van de Blazor WebAssembly of Blazor Hybrid hostingmodellen kunnen gebruikmaken van server-API's voor toegang tot functionaliteit die privé en veilig moet worden gehouden. De overwegingen voor het ontwikkelen en onderhouden van server-API's die worden beschreven in de sectie Directe toegang tot server- en netwerkbronnen van toepassing zijn. Als het ontwikkelen en onderhouden van server-API's niet wenselijk is voor het onderhouden van veilige en persoonlijke app-code, geeft u onderdelen weer voor het Blazor Server hostingmodel.

Apps offline uitvoeren zodra ze zijn gedownload

Zelfstandige Blazor WebAssembly apps die zijn gebouwd als Progressive Web Apps (PWA's) en Blazor Hybrid-apps offline kunnen worden uitgevoerd, wat met name handig is wanneer clients geen verbinding kunnen maken met internet. Onderdelen die worden weergegeven voor het Blazor Server hostingmodel kunnen niet worden uitgevoerd wanneer de verbinding met de server is verbroken. Als een app offline moet worden uitgevoerd, zijn zelfstandige Blazor WebAssembly en Blazor Hybrid de beste keuzes.

Hosten van statische sites

Het hosten van statische sites is mogelijk met zelfstandige Blazor WebAssembly-apps omdat ze worden gedownload naar clients als een set statische bestanden. Voor zelfstandige Blazor WebAssembly-apps is geen server vereist om code aan de serverzijde uit te voeren om deze te downloaden en uit te voeren en te kunnen worden geleverd via een CDN- (bijvoorbeeld Azure CDN-).

Hoewel Blazor Hybrid-apps worden gecompileerd in een of meer zelfstandige implementatieassets, worden de assets meestal aan clients aangeboden via een app store van derden. Als statische hosting een app-vereiste is, selecteer zelfstandige Blazor WebAssembly.

Verplaatst verwerking naar klanten

Blazor WebAssembly- en Blazor Hybrid-apps worden uitgevoerd op clients en verplaatsen daarmee de verwerking naar de clients. Blazor Server apps worden uitgevoerd op een server, waardoor de vraag naar serverbronnen meestal toeneemt met het aantal gebruikers en de hoeveelheid verwerking die per gebruiker is vereist. Wanneer het mogelijk is om de meeste of alle verwerkingen van een app te offloaden naar clients en de app een aanzienlijke hoeveelheid gegevens verwerkt, is Blazor WebAssembly of Blazor Hybrid de beste keuze.

Volledige toegang tot systeemeigen clientmogelijkheden

Blazor Hybrid-apps volledige toegang hebben tot systeemeigen client-API-mogelijkheden via systeemeigen .NET-app-frameworks. In Blazor Hybrid-apps worden Razor onderdelen rechtstreeks in de systeemeigen app uitgevoerd, niet op WebAssembly-. Wanneer volledige clientmogelijkheden een vereiste zijn, is Blazor Hybrid de beste keuze.

Webimplementatie

Blazor webapps worden bijgewerkt bij de volgende verversing van de app vanuit de browser.

Blazor Hybrid-apps systeemeigen client-apps zijn die doorgaans een installatieprogramma en platformspecifiek implementatiemechanisme vereisen.

Het hostingmodel van een onderdeel instellen

Als u het hostingmodel van een onderdeel wilt instellen op Blazor Server of Blazor WebAssembly tijdens het compileren of dynamisch tijdens runtime, stelt u de weergavemodus in. Rendermodi worden volledig uitgelegd en gedemonstreerd in de ASP.NET Core Blazor rendermodi artikel. Wij raden niet aan om rechtstreeks van dit artikel naar het Render-modi artikel te gaan zonder de inhoud in de artikelen tussen deze twee te lezen. Rendermodi zijn bijvoorbeeld gemakkelijker te begrijpen door te kijken naar voorbeelden van Razor onderdelen, maar eenvoudige Razor onderdeelstructuur en -functie worden pas behandeld als het ASP.NET Core Blazor fundamentals artikel is bereikt. Het is ook handig om meer te weten te komen over de projectsjablonen en hulpprogramma's van Blazorvoordat u met de onderdeelvoorbeelden in het Render-modi artikel werkt.