Blazor-Hostingmodelle in ASP.NET CoreASP.NET Core Blazor hosting models

Von Daniel RothBy Daniel Roth

Das Webframework Blazor kann auf Clientseite im Browser in einer auf WebAssembly basierenden .NET-Runtime ( Blazor WebAssembly ) oder auf Serverseite in ASP.NET Core ( Blazor Server ) ausgeführt werden.Blazor is a web framework designed to run client-side in the browser on a WebAssembly-based .NET runtime (Blazor WebAssembly) or server-side in ASP.NET Core (Blazor Server). Die App und die Komponentenmodelle sind für alle Hostingmodelle identisch.Regardless of the hosting model, the app and component models are the same.

Blazor WebAssembly

Das wichtigste Hostingmodell für Blazor wird clientseitig im Browser in WebAssembly ausgeführt.The principal hosting model for Blazor is running client-side in the browser on WebAssembly. Die Blazor-App, die jeweiligen Abhängigkeiten und die .NET-Runtime werden im Browser heruntergeladen.The Blazor app, its dependencies, and the .NET runtime are downloaded to the browser. Die App wird direkt im UI-Thread des Browsers ausgeführt.The app is executed directly on the browser UI thread. Die Aktualisierung der Benutzeroberfläche und die Ereignisbehandlung erfolgen im selben Prozess.UI updates and event handling occur within the same process. Die Ressourcen der App werden als statische Dateien auf einem Webserver oder für einen Dienst bereitgestellt, die geeignet sind, statische Inhalte für Clients bereitzustellen.The app's assets are deployed as static files to a web server or service capable of serving static content to clients.

Blazor WebAssembly: Die Blazor-App wird in einem Benutzeroberflächenthread im Browser ausgeführt.Blazor WebAssembly: The Blazor app runs on a UI thread inside the browser.

Verwenden Sie zum Erstellen einer Blazor-App mithilfe des clientseitigen Hostingmodells die Blazor WebAssembly-App-Vorlage (dotnet new blazorwasm).To create a Blazor app using the client-side hosting model, use the Blazor WebAssembly App template (dotnet new blazorwasm).

Nachdem Sie die Blazor WebAssembly-App-Vorlage ausgewählt haben, können Sie die App so konfigurieren, dass sie ein ASP.NET Core-Back-End verwendet. Aktivieren Sie hierzu das Kontrollkästchen In ASP.NET Core gehostet (dotnet new blazorwasm --hosted).After selecting the Blazor WebAssembly App template, you have the option of configuring the app to use an ASP.NET Core backend by selecting the ASP.NET Core hosted check box (dotnet new blazorwasm --hosted). Die ASP.NET Core-App stellt Clients die Blazor-App bereit.The ASP.NET Core app serves the Blazor app to clients. Die Blazor WebAssembly-App kann mit dem Server über das Netzwerk mithilfe von API-Aufrufen oder SignalR (Verwenden von ASP.NET Core SignalR mit Blazor WebAssembly) interagieren.The Blazor WebAssembly app can interact with the server over the network using web API calls or SignalR (Verwenden von ASP.NET Core SignalR mit Blazor WebAssembly).

Die Vorlagen umfassen das Skript blazor.webassembly.js, mit dem folgende Aktionen ausgeführt werden können:The templates include the blazor.webassembly.js script that handles:

  • Herunterladen der .NET-Runtime, der App und der App-AbhängigkeitenDownloading the .NET runtime, the app, and the app's dependencies.
  • Initialisieren der Runtime, mit der die App ausgeführt wirdInitialization of the runtime to run the app.

Das Blazor WebAssembly-Hostingmodell besitzt folgende Vorteile:The Blazor WebAssembly hosting model offers several benefits:

  • Es besteht keine serverseitige .NET-Abhängigkeit.There's no .NET server-side dependency. Nach dem Herunterladen auf den Client ist die App voll funktionsfähig.The app is fully functioning after it's downloaded to the client.
  • Die Ressourcen und Funktionen des Clients werden voll genutzt.Client resources and capabilities are fully leveraged.
  • Die Arbeit wird vom Server auf den Client verlagert.Work is offloaded from the server to the client.
  • Es ist kein ASP.NET Core-Webserver zum Hosten der App erforderlich.An ASP.NET Core web server isn't required to host the app. Serverlose Bereitstellungsszenarios sind möglich (z. B. das Bereitstellen der App aus einem CDN).Serverless deployment scenarios are possible (for example, serving the app from a CDN).

Das Blazor WebAssembly-Hostingmodell besitzt folgende Nachteile:There are downsides to Blazor WebAssembly hosting:

  • Die App ist auf die Funktionen des Browsers beschränkt.The app is restricted to the capabilities of the browser.
  • Es ist geeignete Clienthardware und -software erforderlich (z. B. WebAssembly-Unterstützung).Capable client hardware and software (for example, WebAssembly support) is required.
  • Die Downloadmenge ist größer und die Ladezeit der Apps länger.Download size is larger, and apps take longer to load.
  • Die Unterstützung für die .NET-Runtime und -Tools ist weniger ausgereift..NET runtime and tooling support is less mature. Bei der Unterstützung und dem Debuggen in .NET Standard existieren beispielsweise Einschränkungen.For example, limitations exist in .NET Standard support and debugging.

Das Blazor-Modell für gehostete Apps unterstützt Docker-Container.The Blazor Hosted app model supports Docker containers. Klicken Sie mit der rechten Maustaste auf das Serverprojekt in Visual Studio, und klicken Sie dann auf Hinzufügen > Docker-Unterstützung.Right-click on the Server project in Visual Studio and select Add > Docker Support.

Blazor Server

Mit dem Blazor Server-Hostingmodell wird die App über eine ASP.NET Core-App auf dem Server ausgeführt.With the Blazor Server hosting model, the app is executed on the server from within an ASP.NET Core app. Benutzeroberflächenupdates, Ereignisbehandlung und JavaScript-Aufrufe werden über eine SignalR-Verbindung verarbeitet.UI updates, event handling, and JavaScript calls are handled over a SignalR connection.

Der Browser interagiert mit der (in einer ASP.NET Core-App gehosteten) App über eine SignalR-Verbindung auf dem Server.The browser interacts with the app (hosted inside of an ASP.NET Core app) on the server over a SignalR connection.

Verwenden Sie zum Erstellen einer Blazor-App mithilfe des Blazor Server-Hostingmodells die ASP.NET Core- Blazor Server-App-Vorlage (dotnet new blazorserver).To create a Blazor app using the Blazor Server hosting model, use the ASP.NET Core Blazor Server App template (dotnet new blazorserver). Die ASP.NET Core-App hostet die Blazor Server-App und erstellt den SignalR-Endpunkt für Clientverbindungen.The ASP.NET Core app hosts the Blazor Server app and creates the SignalR endpoint where clients connect.

Die ASP.NET Core-App verweist auf die Startup-Klasse der App, um folgende Aktionen durchzuführen:The ASP.NET Core app references the app's Startup class to add:

  • Hinzufügen serverseitiger DiensteServer-side services.
  • Hinzufügen der App zur Pipeline für die AnforderungsverarbeitungThe app to the request handling pipeline.

Mit dem Skript blazor.server.js wird die Verbindung mit dem Client hergestellt.The blazor.server.js script establishes the client connection. Die App ist für das Beibehalten und Wiederherstellen des App-Zustands im Bedarfsfall (etwa bei einer Unterbrechung der Netzwerkverbindung) verantwortlich.It's the app's responsibility to persist and restore app state as required (for example, in the event of a lost network connection). Das Skript blazor.server.js wird in einer eingebetteten Ressource im freigegebenen ASP.NET Core-Framework bereitgestellt.The blazor.server.js script is served from an embedded resource in the ASP.NET Core shared framework.

Das Blazor Server-Hostingmodell besitzt folgende Vorteile:The Blazor Server hosting model offers several benefits:

  • Die Downloadgröße ist im Vergleich zu einer Blazor WebAssembly-App deutlich kleiner und die Ladezeit der App wesentlich kürzer.Download size is significantly smaller than a Blazor WebAssembly app, and the app loads much faster.
  • Die Serverfunktionen werden in vollem Umfang genutzt, einschließlich aller mit .NET Core kompatiblen APIs.The app takes full advantage of server capabilities, including use of any .NET Core compatible APIs.
  • Da auf dem Server .NET Core zum Ausführen der App verwendet wird, funktionieren vorhandene .NET-Tools, wie das Debuggen, erwartungsgemäß..NET Core on the server is used to run the app, so existing .NET tooling, such as debugging, works as expected.
  • Thin Clients werden unterstützt.Thin clients are supported. So funktionieren Blazor Server-Apps auch mit Browsern, die WebAssembly nicht unterstützen, sowie auf Geräten mit eingeschränkten Ressourcen.For example, Blazor Server apps work with browsers that don't support WebAssembly and on resource-constrained devices.
  • Die .NET-/C#-Codebasis der App, einschließlich des Komponentencodes, werden nicht für Clients bereitgestellt.The app's .NET/C# code base, including the app's component code, isn't served to clients.

Das Blazor Server-Hostingmodell besitzt folgende Nachteile:There are downsides to Blazor Server hosting:

  • In der Regel ist mit einer höheren Latenzzeit zu rechnen.Higher latency usually exists. Bei jeder Benutzerinteraktion fällt ein Netzwerkhop an.Every user interaction involves a network hop.
  • Es gibt keine Offlineunterstützung.There's no offline support. Bei einer Unterbrechung der Clientverbindung funktioniert die App nicht mehr.If the client connection fails, the app stops working.
  • Die Skalierbarkeit ist bei Apps mit vielen Benutzern schwierig.Scalability is challenging for apps with many users. Der Server muss eine Vielzahl von Clientverbindungen verwalten und Clientzustände verarbeiten.The server must manage multiple client connections and handle client state.
  • Zum Bereitstellen der App ist ein ASP.NET Core-Server erforderlich.An ASP.NET Core server is required to serve the app. Serverlose Bereitstellungsszenarios sind nicht möglich (z. B. das Bereitstellen der App aus einem CDN).Serverless deployment scenarios aren't possible (for example, serving the app from a CDN).

Das Blazor Server-App-Modell unterstützt Docker-Container.The Blazor Server app model supports Docker containers. Klicken Sie mit der rechten Maustaste auf das Projekt in Visual Studio, und klicken Sie dann auf Hinzufügen > Docker-Unterstützung.Right-click on the project in Visual Studio and select Add > Docker Support.

Vergleich mit einer auf dem Server gerenderten BenutzeroberflächeComparison to server-rendered UI

Die Unterschiede zwischen Blazor Server-Apps und traditionellen Modellen beim Rendern von Benutzeroberflächen in ASP.NET Core-Apps mit Razor-Ansichten oder Razor Pages zu kennen ist entscheidend.One way to understand Blazor Server apps is to understand how it differs from traditional models for rendering UI in ASP.NET Core apps using Razor views or Razor Pages. Bei beiden Modellen wird zum Beschreiben von HTML-Inhalt die Razor-Syntax verwendet. Deutliche Unterschiede bestehen hingegen im Rendern von Markup.Both models use the Razor language to describe HTML content, but they significantly differ in how markup is rendered.

Beim Rendern einer Razor-Seite oder -Ansicht gibt jede Razor-Codezeile HTML in Textform aus.When a Razor Page or view is rendered, every line of Razor code emits HTML in text form. Nach dem Rendern verwirft der Server die Instanz der Seite oder Ansicht, einschließlich aller produzierten Zustände.After rendering, the server disposes of the page or view instance, including any state that was produced. Tritt eine weitere Anforderung für die Seite auf, wenn etwa bei der Serverüberprüfung ein Fehler auftritt und die Zusammenfassung der Überprüfung angezeigt wird, werden folgende Aktionen ausgeführt:When another request for the page occurs, for instance when server validation fails and the validation summary is displayed:

  • Die gesamte Seite wird nochmals als HTML-Text gerendert.The entire page is rerendered to HTML text again.
  • Die Seite wird an den Client gesendet.The page is sent to the client.

Eine Blazor-App besteht aus wiederverwendbaren Benutzeroberflächenelementen, die Komponenten genannt werden.A Blazor app is composed of reusable elements of UI called components. Eine Komponente enthält C#-Code, Markup und weitere Komponenten.A component contains C# code, markup, and other components. Wird eine Komponente gerendert, erzeugt Blazor ein Diagramm der enthaltenen Komponenten, das einem HTML- oder XML-Dokumentobjektmodell (DOM) ähnelt.When a component is rendered, Blazor produces a graph of the included components similar to an HTML or XML Document Object Model (DOM). Das Diagramm beinhaltet den in Eigenschaften und Feldern gespeicherten Zustand der Komponenten.This graph includes component state held in properties and fields. Blazor wertet das Komponentendiagramm aus und erstellt eine Binärdarstellung des Markups. evaluates the component graph to produce a binary representation of the markup. Folgende Aktionen können im Binärformat ausgeführt werden:The binary format can be:

  • Umwandlung in HTML-Text (während des Prerenderings†)Turned into HTML text (during prerendering†).
  • Verwendung für eine effiziente Aktualisierung des Markups während des regulären RenderingsUsed to efficiently update the markup during regular rendering.

Prerendering: Die angeforderte Razor-Komponente wird auf dem Server in statisches HTML kompiliert und an den Client gesendet. Dort erfolgt das Rendering für den Benutzer.Prerendering: The requested Razor component is compiled on the server into static HTML and sent to the client, where it's rendered to the user. Nach dem Herstellen einer Verbindung zwischen Client und Server werden die vorab gerenderten statischen Elemente durch interaktive Elemente ersetzt.After the connection is made between the client and the server, the component's static prerendered elements are replaced with interactive elements. Durch Prerendering reagiert die App schneller auf den Benutzer.Prerendering makes the app feel more responsive to the user.

Eine Aktualisierung der Benutzeroberfläche wird in Blazor ausgelöst durch:A UI update in Blazor is triggered by:

  • eine Benutzerinteraktion, wie etwa das Auswählen einer Schaltfläche.User interaction, such as selecting a button.
  • App-Trigger, wie etwa ein Timer.App triggers, such as a timer.

Das Diagramm wird noch mal gerendert, und für die Benutzeroberfläche wird ein Unterschied diff berechnet.The graph is rerendered, and a UI diff (difference) is calculated. Dieser Unterschied stellt die kleinste Menge DOM-Änderungen dar, die zur Aktualisierung der Benutzeroberfläche auf dem Client erforderlich ist.This diff is the smallest set of DOM edits required to update the UI on the client. Der Unterschied wird im Binärformat an den Client gesendet und vom Browser angewendet.The diff is sent to the client in a binary format and applied by the browser.

Eine Komponente wird verworfen, sobald sie der Benutzer auf dem Client wieder verlässt.A component is disposed after the user navigates away from it on the client. Während der Interaktion mit einem Benutzer muss der Zustand der Komponente (Dienste, Ressourcen) im Arbeitsspeicher des Servers gespeichert werden.While a user is interacting with a component, the component's state (services, resources) must be held in the server's memory. Da auf dem Server der Zustand vieler Komponenten möglicherweise gleichzeitig verwaltet werden muss, kann die Speicherausschöpfung zu einem Problem werden.Because the state of many components might be maintained by the server concurrently, memory exhaustion is a concern that must be addressed. Eine Anleitung zum Erstellen einer Blazor Server-App unter optimaler Verwendung des Arbeitsspeichers des Servers finden Sie unter Leitfaden zur Bedrohungsabwehr für Blazor Server in ASP.NET Core.For guidance on how to author a Blazor Server app to ensure the best use of server memory, see Leitfaden zur Bedrohungsabwehr für Blazor Server in ASP.NET Core.

LeitungenCircuits

Eine Blazor Server-App basiert auf ASP.NET Core SignalR.A Blazor Server app is built on top of ASP.NET Core SignalR. Jeder Client kommuniziert mit dem Server über mindestens eine SignalR-Verbindung.Each client communicates to the server over one or more SignalR connections called a circuit. Eine solche Verbindung ist eine Blazor-Abstraktion über SignalR-Verbindungen, die temporäre Netzwerkunterbrechungen tolerieren können.A circuit is Blazor's abstraction over SignalR connections that can tolerate temporary network interruptions. Stellt ein Blazor-Client fest, dass die SignalR-Verbindung unterbrochen ist, versucht er über eine neue SignalR-Verbindung, noch mal eine Verbindung mit dem Server herzustellen.When a Blazor client sees that the SignalR connection is disconnected, it attempts to reconnect to the server using a new SignalR connection.

Jedes Browserfenster (Registerkarte des Browsers oder iframe), das über eine Blazor Server-App verbunden ist, verwendet eine SignalR-Verbindung.Each browser screen (browser tab or iframe) that is connected to a Blazor Server app uses a SignalR connection. Darin besteht ein weiterer wesentlicher Unterschied zu typischen, auf dem Server gerenderten Apps.This is yet another important distinction compared to typical server-rendered apps. Bei auf dem Server gerenderten Apps bedeutet das gleichzeitige Öffnen einer App in mehreren Browserfenstern in der Regel keine zusätzlichen Ressourcenanforderungen auf dem Server.In a server-rendered app, opening the same app in multiple browser screens typically doesn't translate into additional resource demands on the server. In einer Blazor Server-App erfordert jedes Browserfenster eine separate Verbindung und separate Instanzen des Komponentenzustands, die vom Server verwaltet werden müssen.In a Blazor Server app, each browser screen requires a separate circuit and separate instances of component state to be managed by the server.

In Blazor gilt das Schließen einer Browserregisterkarte oder das Navigieren zu einer externen URL als ordnungsgemäße Beendigung.Blazor considers closing a browser tab or navigating to an external URL a graceful termination. Bei einer ordnungsgemäßen Beendigung werden die Verbindung und die zugehörigen Ressourcen sofort freigegeben.In the event of a graceful termination, the circuit and associated resources are immediately released. Die Verbindung zu einem Client kann auch nicht ordnungsgemäß getrennt werden, beispielsweise aufgrund einer Netzwerkunterbrechung.A client may also disconnect non-gracefully, for instance due to a network interruption. Blazor Server speichert getrennte Verbindungen für die Dauer eines konfigurierbaren Intervalls, damit der Client noch mal eine Verbindung herstellen kann. stores disconnected circuits for a configurable interval to allow the client to reconnect.

In Blazor Server kann mithilfe von Code ein Verbindungshandler definiert werden, mit dem Code für Zustandsänderungen einer Benutzerverbindung ausgeführt werden kann.Blazor Server allows code to define a circuit handler, which allows running code on changes to the state of a user's circuit. Weitere Informationen finden Sie unter Erweiterte ASP.NET Core-Blazor-Szenarios.For more information, see Erweiterte ASP.NET Core-Blazor-Szenarios.

BenutzeroberflächenlatenzUI Latency

Benutzeroberflächenlatenz bezeichnet die Zeit vom Initiieren einer Aktion bis zur Aktualisierung der Benutzeroberfläche.UI latency is the time it takes from an initiated action to the time the UI is updated. Je kleiner der Wert für die Benutzeroberflächenlatenz, desto dynamischer fühlt sich eine App für den Benutzer an.Smaller values for UI latency are imperative for an app to feel responsive to a user. Bei einer Blazor Server-App wird jede Aktion an den Server gesendet, verarbeitet und ein Unterschied der Benutzeroberfläche zurückgesendet.In a Blazor Server app, each action is sent to the server, processed, and a UI diff is sent back. Die Benutzeroberflächenlatenz setzt sich folglich zusammen aus der Netzwerklatenz und der Serverlatenz beim Verarbeiten der Aktion.Consequently, UI latency is the sum of network latency and the server latency in processing the action.

Bei einer Branchen-App, die ausschließlich in einem privaten Unternehmensnetzwerk verwendet wird, ist der Anteil der Netzwerklatenz an der gesamten Latenzwahrnehmung durch den Benutzer in der Regel vernachlässigbar.For a line of business app that's limited to a private corporate network, the effect on user perceptions of latency due to network latency are usually imperceptible. Bei einer über das Internet bereitgestellten App kann die Latenz für Benutzer durchaus spürbar sein, insbesondere wenn diese geografisch weit verteilt sind.For an app deployed over the Internet, latency may become noticeable to users, particularly if users are widely distributed geographically.

Auch die Speicherauslastung kann zur Latenzzeit einer App beitragen.Memory usage can also contribute to app latency. Eine erhöhte Speicherauslastung führt zu einer häufigen Speicherbereinigung oder einer Auslagerung auf die Festplatte. Beide Maßnahmen reduzieren die Leistung einer App und erhöhen folglich deren Benutzeroberflächenlatenz.Increased memory usage results in frequent garbage collection or paging memory to disk, both of which degrade app performance and consequently increase UI latency.

Sie sollten Blazor Server-Apps so optimieren, dass die Benutzeroberflächenlatenz durch Reduzieren der Netzwerklatenz und der Speicherauslastung minimiert wird.Blazor Server apps should be optimized to minimize UI latency by reducing network latency and memory usage. Informationen zum Messen der Netzwerklatenz finden Sie unter Hosten und Bereitstellen von ASP.NET Core Blazor Server.For an approach to measuring network latency, see Hosten und Bereitstellen von ASP.NET Core Blazor Server. Weitere Informationen zu SignalR und Blazor finden Sie unter:For more information on SignalR and Blazor, see:

Verbindung mit dem ServerConnection to the server

Blazor Server-Apps erfordern eine aktive SignalR-Verbindung mit dem Server. apps require an active SignalR connection to the server. Wird die Verbindung unterbrochen, versucht die App, noch mal eine Verbindung mit dem Server herzustellen.If the connection is lost, the app attempts to reconnect to the server. Solange der Clientzustand im Arbeitsspeicher gespeichert ist, wird die Clientsitzung ohne Verlust des Zustands wiederhergestellt.As long as the client's state is still in memory, the client session resumes without losing state.

Als Reaktion auf die erste Clientanforderung führt die Blazor Server-App ein Prerendering aus, das den Zustand der Benutzeroberfläche auf dem Server festlegt.A Blazor Server app prerenders in response to the first client request, which sets up the UI state on the server. Versucht der Client, eine SignalR-Verbindung zu erstellen, muss er noch mal mit demselben Server eine Verbindung herstellen.When the client attempts to create a SignalR connection, the client must reconnect to the same server. Blazor Server-Apps mit mehr als einem Back-End-Server sollten für SignalR-Verbindungen persistente Sitzungen implementieren. apps that use more than one backend server should implement sticky sessions for SignalR connections.

Sie sollten Azure SignalR Service für Blazor Server-Apps verwenden.We recommend using the Azure SignalR Service for Blazor Server apps. Der Dienst ermöglicht das Hochskalieren einer Blazor Server-App auf eine große Anzahl gleichzeitiger SignalR-Verbindungen.The service allows for scaling up a Blazor Server app to a large number of concurrent SignalR connections. Bei Azure SignalR Service werden persistente Sitzungen aktiviert, indem die Option ServerStickyMode des Diensts oder dessen Konfigurationswert auf Required festgelegt wird.Sticky sessions are enabled for the Azure SignalR Service by setting the service's ServerStickyMode option or configuration value to Required. Weitere Informationen finden Sie unter Hosten und Bereitstellen von ASP.NET Core Blazor Server.For more information, see Hosten und Bereitstellen von ASP.NET Core Blazor Server.

Bei der Verwendung von IIS sind persistente Sitzungen mit Routing von Anwendungsanforderungen aktiviert.When using IIS, sticky sessions are enabled with Application Request Routing. Weitere Informationen finden Sie unter HTTP-Lastenausgleiche mithilfe von Routing von Anwendungsanforderungen.For more information, see HTTP Load Balancing using Application Request Routing.

Zusätzliche RessourcenAdditional resources