Delen via


Blazor app-hostingmodellen

Tip

Deze inhoud is een fragment uit het eBook, Blazor voor ASP NET-webformulierontwikkelaars voor Azure, beschikbaar op .NET Docs of als een gratis downloadbare PDF die offline kan worden gelezen.

Blazor-for-ASP-NET-Web-Forms-Developers eBook cover thumbnail.

Blazor apps kunnen op een van de volgende manieren worden gehost:

  • Clientzijde in de browser aan WebAssembly.
  • Serverzijde in een ASP.NET Core-app.

BlazorWebAssembly Apps

BlazorWebAssembly apps worden rechtstreeks in de browser uitgevoerd op een WebAssembly.NET-runtime. BlazorWebAssembly apps werken op een vergelijkbare manier als front-end JavaScript-frameworks zoals Angular of React. In plaats van JavaScript te schrijven, schrijft u echter C#. De .NET-runtime wordt gedownload met de app, samen met de app-assembly en eventuele vereiste afhankelijkheden. Er zijn geen browserinvoegtoepassingen of extensies vereist.

De gedownloade assembly's zijn normale .NET-assembly's, zoals u in een andere .NET-app zou gebruiken. Omdat de runtime .NET Standard ondersteunt, kunt u bestaande .NET Standard-bibliotheken gebruiken met uw BlazorWebAssembly app. Deze assembly's worden echter nog steeds uitgevoerd in de sandbox voor browserbeveiliging. Sommige functionaliteit kan een PlatformNotSupportedException, zoals het openen van het bestandssysteem of het openen van willekeurige netwerkverbindingen.

Wanneer de app wordt geladen, wordt de .NET-runtime gestart en aangegeven in de app-assembly. De opstartlogica van de app wordt uitgevoerd en de hoofdonderdelen worden weergegeven. Blazor berekent de ui-updates op basis van de gerenderde uitvoer van de onderdelen. De DOM-updates worden vervolgens toegepast.

Blazor WebAssembly

BlazorWebAssembly apps worden uitsluitend aan de clientzijde uitgevoerd. Dergelijke apps kunnen worden geïmplementeerd in statische sitehostingoplossingen zoals GitHub Pages of Azure Static Website Hosting. .NET is helemaal niet vereist op de server. Voor deep linking naar onderdelen van de app is doorgaans een routeringsoplossing op de server vereist. De routeringsoplossing leidt aanvragen om naar de hoofdmap van de app. Deze omleiding kan bijvoorbeeld worden verwerkt met behulp van URL-herschrijfregels in IIS.

Als u alle voordelen van Blazor .NET-webontwikkeling en de volledige stack wilt hebben, moet u uw BlazorWebAssembly app hosten met ASP.NET Core. Door .NET te gebruiken op zowel de client als de server, kunt u eenvoudig code delen en uw app bouwen met behulp van één consistente set talen, frameworks en hulpprogramma's. Blazor biedt handige sjablonen voor het instellen van een oplossing die zowel een BlazorWebAssembly app als een ASP.NET Core-hostproject bevat. Wanneer de oplossing is gebouwd, worden de ingebouwde statische bestanden van de Blazor app gehost door de ASP.NET Core-app met reeds installatie van terugvalroutering.

Blazor Server-apps

Zoals u weet uit de Blazor architectuurdiscussie , Blazor geven onderdelen hun uitvoer weer naar een tussenliggende abstractie, een RenderTreezogenaamde . Het Blazor framework vergelijkt vervolgens wat er is weergegeven met wat eerder is gerenderd. De verschillen worden toegepast op de DOM. Blazor onderdelen worden losgekoppeld van de wijze waarop de weergegeven uitvoer wordt toegepast. Daarom hoeven de onderdelen zelf niet in hetzelfde proces te worden uitgevoerd als het proces dat de gebruikersinterface bijwerkt. In feite hoeven ze niet eens op dezelfde computer te worden uitgevoerd.

In Blazor Server-apps worden de onderdelen uitgevoerd op de server in plaats van clientzijde in de browser. Gebruikersinterfacegebeurtenissen die zich in de browser voordoen, worden via een realtime-verbinding naar de server verzonden. De gebeurtenissen worden verzonden naar de juiste onderdeelexemplaren. De onderdelen worden weergegeven en de berekende ui-diff wordt geserialiseerd en verzonden naar de browser waarop deze wordt toegepast op de DOM.

Blazor Server

Het Blazor serverhostingmodel klinkt mogelijk bekend als u ASP.NET AJAX en het UpdatePanel besturingselement hebt gebruikt. Het UpdatePanel besturingselement verwerkt het toepassen van gedeeltelijke pagina-updates als reactie op trigger-gebeurtenissen op de pagina. Wanneer deze UpdatePanel wordt geactiveerd, wordt een gedeeltelijke update aangevraagd en vervolgens toegepast zonder dat de pagina hoeft te worden vernieuwd. De status van de gebruikersinterface wordt beheerd met behulp van ViewState. Blazor Server-apps zijn enigszins anders omdat voor de app een actieve verbinding met de client is vereist. Daarnaast wordt alle UI-status op de server gehandhaafd. Afgezien van deze verschillen zijn de twee modellen conceptueel vergelijkbaar.

Het juiste Blazor hostingmodel kiezen

Zoals beschreven in de Blazor hostingmodeldocumenten, hebben de verschillende Blazor hostingmodellen verschillende compromissen.

Het BlazorWebAssembly hostingmodel heeft de volgende voordelen:

  • Er is geen .NET-afhankelijkheid aan de serverzijde. De app werkt volledig nadat deze naar de client is gedownload.
  • Clientbronnen en -mogelijkheden worden volledig gebruikt.
  • Werk wordt van de server naar de client ge offload.
  • Een ASP.NET Core-webserver is niet vereist om de app te hosten. Serverloze implementatiescenario's zijn mogelijk (bijvoorbeeld het leveren van de app vanuit een CDN).

De nadelen van het BlazorWebAssembly hostingmodel zijn:

  • Browsermogelijkheden beperken de app.
  • Compatibele clienthardware en -software (bijvoorbeeld WebAssembly ondersteuning) is vereist.
  • De downloadgrootte is groter en het laden van apps duurt langer.
  • Ondersteuning voor .NET-runtime en hulpprogramma's is minder volwassen. Er zijn bijvoorbeeld beperkingen in .NET Standard-ondersteuning en foutopsporing.

Omgekeerd biedt het Blazor serverhostingmodel de volgende voordelen:

  • Downloadgrootte is veel kleiner dan een app aan de clientzijde en de app wordt veel sneller geladen.
  • De app maakt optimaal gebruik van servermogelijkheden, waaronder het gebruik van eventuele .NET-compatibele API's.
  • .NET 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. Apps aan de serverzijde werken bijvoorbeeld met browsers die geen ondersteuning bieden WebAssembly voor en op apparaten met beperkte resources.
  • De .NET/C#-codebasis van de app, inclusief de onderdeelcode van de app, wordt niet aan clients geleverd.

De voordelen van het Blazor serverhostingmodel zijn:

  • Hogere UI-latentie. Elke gebruikersinteractie omvat een netwerkhop.
  • Er is geen offlineondersteuning. Als de clientverbinding mislukt, werkt de app niet meer.
  • Schaalbaarheid is lastig voor apps met veel gebruikers. De server moet meerdere clientverbindingen beheren en de clientstatus verwerken.
  • Er is een ASP.NET Core-server vereist om de app te bedienen. Serverloze implementatiescenario's zijn niet mogelijk. U kunt de app bijvoorbeeld niet bedienen vanuit een CDN.

De voorgaande lijst met compromissen kan intimiderend zijn, maar uw hostingmodel kan later worden gewijzigd. Ongeacht het Blazor geselecteerde hostingmodel, is het onderdeelmodel hetzelfde. In principe kunnen dezelfde onderdelen worden gebruikt met beide hostingmodellen. Uw app-code verandert niet; Het is echter een goede gewoonte om abstracties te introduceren, zodat uw onderdelen het hosten van modelneutraal blijven. Met de abstracties kan uw app eenvoudiger een ander hostingmodel gebruiken.

Uw app implementeren

ASP.NET Web Forms-apps worden doorgaans gehost op IIS op een Windows Server-computer of -cluster. Blazor apps kunnen ook:

  • Worden gehost op IIS, als statische bestanden of als een ASP.NET Core-app.
  • Maak gebruik van de flexibiliteit van ASP.NET Core om te worden gehost op verschillende platforms en serverinfrastructuren. U kunt bijvoorbeeld een Blazor app hosten met behulp van Nginx of Apache in Linux. Zie de documentatie over hosting en implementatie voor meer informatie over hetBlazor publiceren en implementeren Blazor van apps.

In de volgende sectie bekijken we hoe de projecten voor BlazorWebAssembly en Blazor Server-apps zijn ingesteld.