Hostingmodelle für die Blazor-App

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

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

BlazorWebAssembly-Apps

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

Die heruntergeladenen Assemblys sind normale .NET-Assemblys, wie man sie in jeder anderen .NET-App verwenden würde. Da die Runtime .NET Standard unterstützt, können Sie vorhandene .NET Standardbibliotheken mit Ihrer BlazorWebAssembly-App verwenden. Diese Assemblys werden jedoch weiterhin in der Browser-Sicherheits-Sandbox ausgeführt. Einige Funktionen lösen möglicherweise einen PlatformNotSupportedException aus, z. B. den Zugriff auf das Dateisystem oder das Öffnen beliebiger Netzwerkverbindungen.

Wenn die App geladen wird, wird die .NET-Laufzeit gestartet, und es wird auf die App-Assembly verwiesen. Die App-Start Logik wird ausgeführt, und die Stammkomponenten werden gerendert. Blazor berechnet die Aktualisierungen der Benutzeroberfläche auf der Grundlage der gerenderten Ausgabe der Komponenten. Anschließend werden die DOM-Aktualisierungen angewendet.

BlazorWebAssembly-Apps werden nur auf Clientseite ausgeführt. Solche Apps können für statische Site Hosting-Lösungen wie GitHub-Seiten oder das Hosting von Azure Static-Websites bereitgestellt werden. .NET muss bei überhaupt nicht auf dem Server vorhanden sein. Die Deep-Linking mit den Teilen der App erfordert in der Regel eine Routinglösung auf dem Server. Die Routinglösung leitet Anforderungen an den Stamm der App um. Diese Umleitung kann beispielsweise mithilfe von URL-Umschreibungsregeln in IIS verarbeitet werden.

Hosten Sie Ihre BlazorWebAssembly-App mit ASP.NET Core, um alle Vorteile von Blazor und der .NET-Webentwicklung mit vollständigem Stapel zu erhalten. Wenn Sie .NET sowohl auf dem Client als auch auf dem Server verwenden, können Sie Code problemlos freigeben und die App mithilfe eines konsistenten Satzes 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-Host Projekt enthält. Wenn die Lösung erstellt wird, werden die erstellten statischen Dateien aus der Blazor-App von der ASP.NET Core-App gehostet, wobei das Fallback-Routing bereits eingerichtet ist.

Blazor-Server-Apps

Erinnern Sie sich aus der BlazorArchitektur-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 von der Anwendung ihrer gerenderten Ausgabe entkoppelt. Folglich müssen die Komponenten selbst nicht in demselben Prozess ausgeführt werden wie der Prozess, welcher die Benutzeroberfläche aktualisiert. Tatsächlich müssen sie nicht einmal auf dem gleichen Computer ausgeführt werden.

In Blazor-Server-Apps werden die Komponenten auf dem Server anstelle der Clientseite im Browser ausgeführt. Benutzeroberflächen-Ereignisse, die im Browser auftreten, werden über eine Echtzeitverbindung an den Server gesendet. Die Ereignisse werden an die richtigen Komponenten-Instanzen weitergeleitet. 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-Server-Hostingmodell ist möglicherweise vertraut, wenn Sie ASP.NET AJAX und das UpdatePanel-Steuerelement verwendet haben. Das UpdatePanel-Steuerelement übernimmt das Anwenden partieller Seiten Aktualisierungen als Reaktion auf Auslöserereignisse auf der Seite. Nach dem Auslösen fordert UpdatePanel eine partielle Aktualisierung an und wendet Sie dann an, ohne die Seite aktualisieren zu müssen. Der Status der Benutzeroberfläche wird mithilfe von ViewState verwaltet. Blazor-Server-Apps unterscheiden sich geringfügig in der Weise, dass die App eine aktive Verbindung mit dem Client erfordert. Außerdem wird der gesamte Status der Benutzeroberfläche auf dem Server beibehalten. Abgesehen von diesen Unterschieden sind die beiden Modelle konzeptionell ähnlich.

Auswählen des richtigen Blazor-Hostingmodells

Wie in der Dokumentation des Blazor-Hostingmodellsbeschrieben, haben die verschiedenen Blazor-Hostingmodelle unterschiedliche Kompromisse.

Das BlazorWebAssembly-Hostingmodell hat die folgenden Vorteile:

• Es besteht keine serverseitige .NET-Abhängigkeit. Nach dem Herunterladen auf den Client ist die App voll funktionsfähig.
• Die Ressourcen und Funktionen des Clients werden voll genutzt.
• Die Arbeit wird vom Server auf den Client verlagert.
• Es ist kein ASP.NET Core-Webserver zum Hosten der App erforderlich. Serverlose Bereitstellungsszenarios sind möglich (z. B. das Bereitstellen der App aus einem CDN).

Die Nachteile des BlazorWebAssembly-Hostingmodells sind:

• Browserfunktionen schränken die App ein.
• Es ist geeignete Clienthardware und -software erforderlich (z. B. WebAssembly-Unterstützung).
• Die Downloadmenge ist größer und die Ladezeit der Apps länger.
• Die Unterstützung für die .NET-Runtime und -Tools ist weniger ausgereift. Bei der Unterstützung und dem Debuggen in .NET Standard existieren beispielsweise Einschränkungen.

Umgekehrt bietet das Blazor-Server-Hostingmodell die folgenden Vorteile:

• Die Downloadgröße ist im Vergleich zu einer App auf Clientseite deutlich kleiner und die Ladezeit der App wesentlich kürzer.
• Die Serverfunktionen werden von der App in vollem Umfang genutzt, einschließlich aller mit .NET Core kompatiblen APIs.
• Da .NET auf dem Server wird zum Ausführen der App verwendet wird, funktionieren vorhandene .NET-Tools, wie das Debuggen, erwartungsgemäß.
• Thin Clients werden unterstützt. So funktionieren serverseitige Apps auch mit Browsern, die WebAssembly nicht unterstützen sowie auf Geräten mit eingeschränkten Ressourcen.
• Die .NET-/C#-Codebasis der App, einschließlich des Komponentencodes, werden nicht für Clients bereitgestellt.

Folgende Nachteile gelten für das Blazor-Server-Hostingmodell:

• Höhere UI-Latenz. Bei jeder Benutzerinteraktion fällt ein Netzwerkhop an.
• Es gibt keine Offlineunterstützung. Bei einer Unterbrechung der Clientverbindung funktioniert die App nicht mehr.
• Die Skalierbarkeit ist bei Apps mit vielen Benutzern schwierig. Der Server muss eine Vielzahl von Clientverbindungen verwalten und Clientzustände verarbeiten.
• Zum Bereitstellen der App ist ein ASP.NET Core-Server erforderlich. Serverlose Bereitstellungsszenarien sind nicht möglich. Beispielsweise können Sie die App nicht über ein CDN bereitstellen.

Die vorherige Liste von Vor-und Nachteile ist möglicherweise einschüchternd, aber Ihr Hostingmodell kann später geändert werden. Unabhängig vom ausgewählten Blazor-Hostingmodell ist das Komponentenmodell identisch. Prinzipiell können dieselben Komponenten mit einem der beiden Hostingmodelle verwendet werden. Ihr App-Code ändert sich nicht. Es empfiehlt sich jedoch, Abstraktionen einzuführen, damit Ihre Komponenten Hostingmodell-agnostisch bleiben. Die Abstraktionen ermöglichen es Ihrer App, ein anderes Hostingmodell leichter zu übernehmen.

Bereitstellen Ihrer App

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

• In IIS gehostet werden, entweder als statische Dateien oder als ASP.NET Core-App.
• Die ASP.NET Core-Flexibilität nutzen, um auf verschiedenen Plattformen und Server-Infrastrukturen gehostet zu werden. Beispielsweise können Sie eine Blazor-App mit Nginx oder Apache unter Linux hosten. Weitere Informationen zum Veröffentlichen und Bereitstellen von Blazor-Apps finden Sie in der Blazor-Dokumentation -Hosting und Bereitstellung.

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