Blazor App-Hostingmodelle

Tipp

Diese Inhalte sind ein Auszug aus dem eBook „Blazor for ASP NET Web Forms Developers for Azure“, verfügbar unter .NET Docs oder als kostenlos herunterladbare PDF-Datei, die offline gelesen werden kann.

PDF herunterladen

Blazor Apps können auf eine der folgenden Arten gehostet werden:

• Clientseitig im Browser auf WebAssembly.
• Serverseitig in einer ASP.NET Core-App.

Blazor WebAssembly-Apps

Blazor WebAssembly-Apps werden direkt im Browser auf einer WebAssembly-basierten .NET-Runtime ausgeführt. Blazor WebAssembly Apps funktionieren ähnlich wie Front-End-JavaScript-Frameworks wie Angular oder React. Anstatt jedoch JavaScript zu schreiben, schreiben Sie C#. Die .NET-Laufzeit wird zusammen mit der App, der App-Assembly und allen erforderlichen Abhängigkeiten heruntergeladen. Es sind keine Browser-Plug-Ins oder Erweiterungen erforderlich.

Die heruntergeladenen Assemblys sind normale .NET-Assemblys, wie sie in jeder anderen .NET-App verwendet werden. Da die Laufzeit .NET Standard unterstützt, können Sie vorhandene .NET Standard-Bibliotheken mit Ihrer BlazorWebAssembly App verwenden. Diese Assemblys werden jedoch weiterhin im Browsersicherheits-Sandkasten ausgeführt. Bestimmte Funktionen können ein PlatformNotSupportedException verursachen, beispielsweise beim Versuch, auf das Dateisystem zuzugreifen oder beliebige Netzwerkverbindungen zu öffnen.

Wenn die App geladen wird, wird die .NET-Laufzeit gestartet und auf die App-Assembly verwiesen. Die App-Startlogik wird ausgeführt, und die Stammkomponenten werden gerendert. Blazor berechnet die UI-Aktualisierungen basierend auf der gerenderten Ausgabe der Komponenten. Die DOM-Updates werden dann angewendet.

Blazor WebAssembly Apps werden rein clientseitig ausgeführt. Solche Apps können für statische Websitehostinglösungen wie GitHub Pages oder Azure Static Website Hosting bereitgestellt werden. .NET ist überhaupt nicht auf dem Server erforderlich. Deep-Linking zu Teilen der App erfordert in der Regel eine Routing-Lösung auf Server-Seite. Die Routinglösung leitet Anforderungen an den Stamm der App um. Diese Umleitung kann z. B. mithilfe von URL-Umschreibungsregeln in IIS behandelt werden.

Um alle Vorzüge von Blazor und der Full-Stack .NET-Webentwicklung voll auszuschöpfen, hosten Sie Ihre BlazorWebAssembly App mit ASP.NET Core. Wenn Sie .NET sowohl auf dem Client als auch auf dem Server verwenden, können Sie code einfach freigeben und Ihre App mithilfe einer konsistenten Gruppe von Sprachen, Frameworks und Tools erstellen. Blazor bietet praktische Vorlagen zum Einrichten einer Lösung, die sowohl eine BlazorWebAssembly App als auch ein ASP.NET Core-Hostprojekt enthält. Wenn die Lösung erstellt wird, werden die erstellten statischen Dateien aus der Blazor App von der ASP.NET Core-App mit bereits eingerichteten Fallbackrouting gehostet.

Blazor-Server-Apps

Erinnern Sie sich aus der Blazor-Architektur-Diskussion, dass Blazor-Komponenten ihre Ausgabe an eine Zwischenabstraktion rendern, die RenderTree genannt wird. Das Blazor Framework vergleicht dann, was gerendert wurde mit dem, was zuvor gerendert wurde. Die Unterschiede werden auf das DOM angewendet. Blazor Komponenten sind davon entkoppelt, wie ihre gerenderte Ausgabe angewendet wird. Folglich müssen die Komponenten selbst nicht im gleichen Prozess ausgeführt werden wie der Prozess, der die Benutzeroberfläche aktualisiert. Tatsächlich müssen sie nicht einmal auf demselben Computer ausgeführt werden.

In Blazor Server-Apps werden die Komponenten auf dem Server statt clientseitig im Browser ausgeführt. Ui-Ereignisse, die im Browser auftreten, werden über eine Echtzeitverbindung an den Server gesendet. Die Ereignisse werden an die richtigen Komponenteninstanzen verteilt. Die Komponenten werden gerendert, und der berechnete Benutzeroberflächen-Unterschied wird serialisiert und an den Browser gesendet, in dem er auf das DOM angewendet wird.

Das Blazor Serverhostingmodell klingt möglicherweise vertraut, wenn Sie ASP.NET AJAX und das UpdatePanel Steuerelement verwendet haben. Das UpdatePanel Steuerelement behandelt das Anwenden teilweiser Seitenaktualisierungen als Reaktion auf Triggerereignisse auf der Seite. Wenn dies ausgelöst wird, fordert die UpdatePanel Anforderung eine partielle Aktualisierung an und wendet sie dann an, ohne die Seite aktualisieren zu müssen. Der Zustand der Benutzeroberfläche wird mit ViewStateverwaltet. Blazor Server-Apps unterscheiden sich geringfügig, da für die App eine aktive Verbindung mit dem Client erforderlich ist. Darüber hinaus wird der gesamte UI-Zustand auf dem Server verwaltet. Abgesehen von diesen Unterschieden sind die beiden Modelle konzeptionell ähnlich.

Auswählen des richtigen Blazor Hostingmodells

Wie in den Blazor Hostingmodelldokumenten beschrieben, weisen die verschiedenen Hostingmodelle unterschiedliche Blazor Kompromisse auf.

Das BlazorWebAssembly Hostingmodell hat die folgenden Vorteile:

• Es gibt keine serverseitige .NET-Abhängigkeit. Die App funktioniert nach dem Herunterladen auf den Client vollständig.
• Clientressourcen und -funktionen werden vollständig genutzt.
• Die Arbeit wird vom Server auf den Client entladen.
• Zum Hosten der App ist kein ASP.NET Core-Webserver erforderlich. Serverlose Bereitstellungsszenarien sind möglich (z. B. die Bereitstellung der App über ein CDN).

Die Nachteile des BlazorWebAssembly Hostingmodells sind:

• Browserfunktionen beschränken die App.
• Es ist geeignete Clienthardware und -software erforderlich (z. B. WebAssembly-Unterstützung).
• Die Downloadgröße ist größer, und Das Laden von Apps dauert länger.
• .NET-Laufzeit- und Toolunterstützung ist weniger reif. Es gibt z. B. Einschränkungen bei .NET Standard-Unterstützung und -Debugging.

Umgekehrt bietet das Blazor Serverhostingmodell die folgenden Vorteile:

• Die Downloadgröße ist viel kleiner als eine clientseitige App, und die App wird viel schneller geladen.
• Die App nutzt alle Serverfunktionen, einschließlich der Verwendung von .NET-kompatiblen APIs.
• .NET auf dem Server wird verwendet, um die App auszuführen, sodass vorhandene .NET-Tools wie das Debuggen erwartungsgemäß funktionieren.
• Thin Clients werden unterstützt. Serverseitige Apps funktionieren z. B. mit Browsern, die keine Unterstützung WebAssembly und auf geräten mit Ressourcenbeschränkungen bieten.
• Die .NET/C#-Codebasis der App, einschließlich des Komponentencodes der App, wird nicht für Clients bereitgestellt.

Die Nachteile des Blazor Serverhostingmodells sind:

• Höhere Benutzeroberflächenlatenz. Jede Benutzerinteraktion beinhaltet einen Netzwerksprung.
• Es gibt keine Offlineunterstützung. Wenn die Clientverbindung fehlschlägt, funktioniert die App nicht mehr.
• Skalierbarkeit ist für Apps mit vielen Benutzern eine Herausforderung. Der Server muss mehrere Clientverbindungen verwalten und den Clientstatus behandeln.
• Für die App ist ein ASP.NET Core-Server erforderlich. Serverlose Bereitstellungsszenarien sind nicht möglich. Sie können die App beispielsweise nicht über ein CDN bereitstellen.

Die vorherige Liste der Trade-Offs kann einschüchternd sein, aber Ihr Hostingmodell kann später geändert werden. Unabhängig vom Blazor ausgewählten Hostingmodell ist das Komponentenmodell identisch. Grundsätzlich können dieselben Komponenten mit beiden Hostingmodellen verwendet werden. Ihr App-Code ändert sich nicht; Es empfiehlt sich jedoch, Abstraktionen einzuführen, damit Ihre Komponenten modellagnostisch bleiben. Mit den Abstraktionen kann Ihre App ein anderes Hostingmodell einfacher übernehmen.

Bereitstellen Ihrer App

ASP.NET Web Forms-Apps werden in der Regel auf IIS auf einem Windows Server-Computer oder -Cluster gehostet. Blazor Apps können auch:

• In IIS gehostet werden, entweder als statische Dateien oder als ASP.NET Core-App.
• Nutzen Sie ASP.NET Cores Flexibilität, auf verschiedenen Plattformen und Serverinfrastrukturen gehostet zu werden. Sie können beispielsweise eine Blazor App mit Nginx oder Apache unter Linux hosten. Weitere Informationen zum Veröffentlichen und Bereitstellen von Blazor Apps finden Sie in der BlazorHosting- und Bereitstellungsdokumentation .

Im nächsten Abschnitt werden wir uns ansehen, wie die Projekte für BlazorWebAssembly und Blazor Server-Apps eingerichtet werden.

ZurückWeiter