ASP.NET Core Blazor des modèles d’hébergementASP.NET Core Blazor hosting models

Par Daniel RothBy Daniel Roth

Important

Blazor webassembly en préversionBlazor WebAssembly in preview

Blazor Server est pris en charge dans ASP.net Core 3,0.Blazor Server is supported in ASP.NET Core 3.0. Blazor Webassembly est en version préliminaire pour ASP.net Core 3,1.Blazor WebAssembly is in preview for ASP.NET Core 3.1.

Blazor est un Framework Web conçu pour s’exécuter côté client dans le navigateur sur un Runtime .NET basé sur Webassembly( Blazor webassembly) ou côté serveur dans ASP.net Core ( serveurBlazor ). 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). Quel que soit le modèle d’hébergement, les modèles d’application et de composant sont les mêmes.Regardless of the hosting model, the app and component models are the same.

Pour créer un projet pour les modèles d’hébergement décrits dans cet article, consultez Prise en main de ASP.NET Core Blazor.To create a project for the hosting models described in this article, see Prise en main de ASP.NET Core Blazor.

Pour une configuration avancée, consultez Configuration du modèle d’hébergement ASP.NET Core Blazor.For advanced configuration, see Configuration du modèle d’hébergement ASP.NET Core Blazor.

Blazor webassembly WebAssembly

Le modèle d’hébergement principal pour Blazor s’exécute côté client dans le navigateur sur webassembly.The principal hosting model for Blazor is running client-side in the browser on WebAssembly. L’application Blazor, ses dépendances et le Runtime .NET sont téléchargés dans le navigateur.The Blazor app, its dependencies, and the .NET runtime are downloaded to the browser. L’application est exécutée directement sur le thread d’interface utilisateur du navigateur.The app is executed directly on the browser UI thread. Les mises à jour de l’interface utilisateur et la gestion des événements se produisent dans le même processus.UI updates and event handling occur within the same process. Les ressources de l’application sont déployées en tant que fichiers statiques sur un serveur Web ou un service qui prend en charge le contenu statique sur les clients.The app's assets are deployed as static files to a web server or service capable of serving static content to clients.

[! Opérationnel. NO-LOC (éblouissant)] webassembly : [ ! Opérationnel. NO-LOC (éblouissant)] l’application s’exécute sur un thread d’interface utilisateur dans le navigateur. WebAssembly: The Blazor app runs on a UI thread inside the browser.

Pour créer une application Blazor à l’aide du modèle d’hébergement côté client, utilisez le modèle d' applicationBlazor Webassembly (dotnet New blazorwasm).To create a Blazor app using the client-side hosting model, use the Blazor WebAssembly App template (dotnet new blazorwasm).

Après avoir sélectionné le modèle d' applicationBlazor Webassembly , vous avez la possibilité de configurer l’application pour utiliser un serveur principal ASP.net core en activant la case à cocher ASP.net Core hébergé (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). L’application ASP.NET Core sert l’application Blazor aux clients.The ASP.NET Core app serves the Blazor app to clients. L’application Blazor webassembly peut interagir avec le serveur sur le réseau à l’aide d’appels d’API Web ou de SignalR (Utiliser ASP.NET Core SignalR avec Blazor webassembly).The Blazor WebAssembly app can interact with the server over the network using web API calls or SignalR (Utiliser ASP.NET Core SignalR avec Blazor webassembly).

Les modèles incluent le blazor.webassembly.js script qui gère :The templates include the blazor.webassembly.js script that handles:

  • Téléchargement du Runtime .NET, de l’application et des dépendances de l’application.Downloading the .NET runtime, the app, and the app's dependencies.
  • Initialisation du runtime pour exécuter l’application.Initialization of the runtime to run the app.

Le modèle d’hébergement webassembly Blazor offre plusieurs avantages :The Blazor WebAssembly hosting model offers several benefits:

  • Il n’existe aucune dépendance côté serveur .NET.There's no .NET server-side dependency. L’application fonctionne entièrement après son téléchargement sur le client.The app is fully functioning after downloaded to the client.
  • Les ressources et les fonctionnalités du client sont pleinement exploitées.Client resources and capabilities are fully leveraged.
  • Le travail est déchargé du serveur vers le client.Work is offloaded from the server to the client.
  • Un serveur Web ASP.NET Core n’est pas requis pour héberger l’application.An ASP.NET Core web server isn't required to host the app. Les scénarios de déploiement sans serveur sont possibles (par exemple, pour servir l’application à partir d’un CDN).Serverless deployment scenarios are possible (for example, serving the app from a CDN).

Il existe des inconvénients à Blazor l’hébergement webassembly :There are downsides to Blazor WebAssembly hosting:

  • L’application est limitée aux fonctionnalités du navigateur.The app is restricted to the capabilities of the browser.
  • Le matériel et le logiciel client compatibles (par exemple, la prise en charge de webassembly) sont requis.Capable client hardware and software (for example, WebAssembly support) is required.
  • La taille du téléchargement est supérieure, et les applications prennent plus de temps à se charger.Download size is larger, and apps take longer to load.
  • Le Runtime .NET et la prise en charge des outils sont moins matures..NET runtime and tooling support is less mature. Par exemple, des limitations existent dans la prise en charge de .NET standard et le débogage.For example, limitations exist in .NET Standard support and debugging.

Serveur de BlazorBlazor Server

Avec le modèle d’hébergement Blazor Server, l’application est exécutée sur le serveur à partir d’une application ASP.NET Core.With the Blazor Server hosting model, the app is executed on the server from within an ASP.NET Core app. Les mises à jour de l’interface utilisateur, la gestion des événements et les appels JavaScript sont gérés via une connexion SignalR .UI updates, event handling, and JavaScript calls are handled over a SignalR connection.

Le navigateur interagit avec l’application (hébergée à l’intérieur d’une application ASP.NET Core) sur le serveur via un [ ! Opérationnel. Connexion NO-LOC (Signalr)].

Pour créer une application Blazor à l’aide du modèle d’hébergement Blazor Server, utilisez le modèle d' application ASP.NET CoreBlazor Server (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). L’application ASP.NET Core héberge l’application Blazor Server et crée le point de terminaison SignalR où les clients se connectent.The ASP.NET Core app hosts the Blazor Server app and creates the SignalR endpoint where clients connect.

L’application ASP.NET Core fait référence à la classe de Startup de l’application à ajouter :The ASP.NET Core app references the app's Startup class to add:

  • Services côté serveur.Server-side services.
  • L’application vers le pipeline de traitement des demandes.The app to the request handling pipeline.

Le script de blazor.server.js† établit la connexion client.The blazor.server.js script† establishes the client connection. Il est de la responsabilité de l’application de conserver et de restaurer l’état de l’application en fonction des besoins (par exemple, en cas de perte de connexion réseau).It's the app's responsibility to persist and restore app state as required (for example, in the event of a lost network connection).

Le modèle d’hébergement Blazor Server offre plusieurs avantages :The Blazor Server hosting model offers several benefits:

  • La taille du téléchargement est beaucoup plus petite qu’une application Blazor webassembly, et l’application est chargée beaucoup plus rapidement.Download size is significantly smaller than a Blazor WebAssembly app, and the app loads much faster.
  • L’application tire pleinement parti des fonctionnalités du serveur, notamment de l’utilisation de toutes les API compatibles avec .NET Core.The app takes full advantage of server capabilities, including use of any .NET Core compatible APIs.
  • .NET Core sur le serveur est utilisé pour exécuter l’application, de sorte que les outils .NET existants, tels que le débogage, fonctionnent comme prévu..NET Core on the server is used to run the app, so existing .NET tooling, such as debugging, works as expected.
  • Les clients légers sont pris en charge.Thin clients are supported. Par exemple, les applications Blazor Server fonctionnent avec des navigateurs qui ne prennent pas en charge webassembly et sur des appareils à ressources restreintes.For example, Blazor Server apps work with browsers that don't support WebAssembly and on resource-constrained devices.
  • Le .NET/C# base de code de l’application, y compris le code du composant de l’application, n’est pas pris en charge par les clients.The app's .NET/C# code base, including the app's component code, isn't served to clients.

Blazor Hébergement de serveur présente des inconvénients :There are downsides to Blazor Server hosting:

  • Une latence plus élevée existe généralement.Higher latency usually exists. Chaque interaction utilisateur implique un tronçon réseau.Every user interaction involves a network hop.
  • Il n’existe aucune prise en charge hors connexion.There's no offline support. Si la connexion cliente échoue, l’application cesse de fonctionner.If the client connection fails, the app stops working.
  • L’évolutivité est difficile pour les applications avec de nombreux utilisateurs.Scalability is challenging for apps with many users. Le serveur doit gérer plusieurs connexions clientes et gérer l’état du client.The server must manage multiple client connections and handle client state.
  • Un serveur de ASP.NET Core est requis pour servir l’application.An ASP.NET Core server is required to serve the app. Les scénarios de déploiement sans serveur ne sont pas possibles (par exemple, pour servir l’application à partir d’un CDN).Serverless deployment scenarios aren't possible (for example, serving the app from a CDN).

†le script blazor.server.js est pris en charge à partir d’une ressource incorporée dans le ASP.NET Core Framework partagé.†The blazor.server.js script is served from an embedded resource in the ASP.NET Core shared framework.

Comparaison avec l’interface utilisateur du rendu serveurComparison to server-rendered UI

L’une des façons de comprendre les applications Blazor Server consiste à comprendre la différence entre les modèles traditionnels pour le rendu de l’interface utilisateur dans les applications de ASP.NET Core à l’aide de vues Razor ou Razor Pages.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. Les deux modèles utilisent le langage Razor pour décrire le contenu HTML, mais ils diffèrent considérablement dans le mode de rendu du balisage.Both models use the Razor language to describe HTML content, but they significantly differ in how markup is rendered.

Quand une page Razor ou une vue est restituée, chaque ligne de code Razor émet du code HTML sous forme de texte.When a Razor Page or view is rendered, every line of Razor code emits HTML in text form. Après le rendu, le serveur supprime l’instance de la page ou de la vue, y compris tout état produit.After rendering, the server disposes of the page or view instance, including any state that was produced. Lorsqu’une autre demande pour la page se produit, par exemple lorsque la validation du serveur échoue et que le résumé des validations s’affiche :When another request for the page occurs, for instance when server validation fails and the validation summary is displayed:

  • La page entière est de nouveau restituée au texte HTML.The entire page is rerendered to HTML text again.
  • La page est envoyée au client.The page is sent to the client.

Une application Blazor est composée d’éléments réutilisables de l’interface utilisateur appelée composants.A Blazor app is composed of reusable elements of UI called components. Un composant contient C# du code, un balisage et d’autres composants.A component contains C# code, markup, and other components. Quand un composant est rendu, Blazor produit un graphique des composants inclus similaires à un Document Object Model XML ou XML (DOM).When a component is rendered, Blazor produces a graph of the included components similar to an HTML or XML Document Object Model (DOM). Ce graphique comprend l’état des composants contenus dans les propriétés et les champs.This graph includes component state held in properties and fields. Blazor évalue le graphique du composant pour produire une représentation binaire de la balise. evaluates the component graph to produce a binary representation of the markup. Le format binaire peut être :The binary format can be:

  • Converti en texte HTML (lors du prérendu†).Turned into HTML text (during prerendering†).
  • Utilisé pour mettre à jour efficacement le balisage pendant le rendu normal.Used to efficiently update the markup during regular rendering.

†le prérendu – le composant Razor demandé est compilé sur le serveur en code HTML statique et envoyé au client, où il est rendu à l’utilisateur.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. Une fois la connexion établie entre le client et le serveur, les éléments statiques prérendus du composant sont remplacés par des éléments interactifs.After the connection is made between the client and the server, the component's static prerendered elements are replaced with interactive elements. Le prérendu rend l’application plus réactive pour l’utilisateur.Prerendering makes the app feel more responsive to the user.

Une mise à jour de l’interface utilisateur dans Blazor est déclenchée par :A UI update in Blazor is triggered by:

  • Intervention de l’utilisateur, telle que la sélection d’un bouton.User interaction, such as selecting a button.
  • Déclencheurs d’application, tels qu’un minuteur.App triggers, such as a timer.

Le graphique est rerendu et une différence d’interface utilisateur (différence) est calculée.The graph is rerendered, and a UI diff (difference) is calculated. Cette différence est le plus petit ensemble de modifications DOM requis pour mettre à jour l’interface utilisateur sur le client.This diff is the smallest set of DOM edits required to update the UI on the client. Le diff est envoyé au client dans un format binaire et appliqué par le navigateur.The diff is sent to the client in a binary format and applied by the browser.

Un composant est supprimé une fois que l’utilisateur l’a quittée sur le client.A component is disposed after the user navigates away from it on the client. Lorsqu’un utilisateur interagit avec un composant, l’état du composant (services, ressources) doit être conservé dans la mémoire du serveur.While a user is interacting with a component, the component's state (services, resources) must be held in the server's memory. Étant donné que l’état de nombreux composants peut être géré simultanément par le serveur, l’épuisement de la mémoire est un problème qui doit être résolu.Because the state of many components might be maintained by the server concurrently, memory exhaustion is a concern that must be addressed. Pour obtenir des conseils sur la création d’une application Blazor Server afin de garantir la meilleure utilisation de la mémoire du serveur, consultez Sécuriser les applications ASP.NET Core Blazor Server.For guidance on how to author a Blazor Server app to ensure the best use of server memory, see Sécuriser les applications ASP.NET Core Blazor Server.

CircuitsCircuits

Une application Blazor Server s’appuie sur ASP.NET Core SignalR.A Blazor Server app is built on top of ASP.NET Core SignalR. Chaque client communique avec le serveur sur une ou plusieurs connexions SignalR appelées circuit.Each client communicates to the server over one or more SignalR connections called a circuit. Un circuit est l’abstraction de Blazorsur SignalR connexions qui peuvent tolérer des interruptions réseau temporaires.A circuit is Blazor's abstraction over SignalR connections that can tolerate temporary network interruptions. Lorsqu’un client Blazor constate que la connexion SignalR est déconnectée, il tente de se reconnecter au serveur à l’aide d’une nouvelle connexion SignalR.When a Blazor client sees that the SignalR connection is disconnected, it attempts to reconnect to the server using a new SignalR connection.

Chaque écran de navigateur (onglet ou IFRAME) qui est connecté à une application Blazor Server utilise une connexion SignalR.Each browser screen (browser tab or iframe) that is connected to a Blazor Server app uses a SignalR connection. Il s’agit encore d’une autre distinction importante par rapport aux applications classiques affichées par le serveur.This is yet another important distinction compared to typical server-rendered apps. Dans une application affichée sur un serveur, l’ouverture de la même application dans plusieurs écrans de navigateur n’est généralement pas convertie en demandes de ressources supplémentaires sur le serveur.In a server-rendered app, opening the same app in multiple browser screens typically doesn't translate into additional resource demands on the server. Dans une application Blazor Server, chaque écran du navigateur requiert un circuit distinct et des instances distinctes de l’état du composant à gérer par le serveur.In a Blazor Server app, each browser screen requires a separate circuit and separate instances of component state to be managed by the server.

Blazor envisage de fermer un onglet de navigateur ou de naviguer vers une URL externe un arrêt normal . considers closing a browser tab or navigating to an external URL a graceful termination. En cas de résiliation appropriée, le circuit et les ressources associées sont immédiatement libérés.In the event of a graceful termination, the circuit and associated resources are immediately released. Un client peut également se déconnecter de manière non appropriée, par exemple en raison d’une interruption du réseau.A client may also disconnect non-gracefully, for instance due to a network interruption. Blazor Server stocke les circuits déconnectés pour un intervalle configurable afin de permettre au client de se reconnecter. Server stores disconnected circuits for a configurable interval to allow the client to reconnect. Pour plus d’informations, consultez reconnexion au même serveur.For more information, see Reconnection to the same server.

Latence de l’interface utilisateurUI Latency

La latence de l’interface utilisateur est le temps qu’il faut après une action initiée jusqu’au moment où l’interface utilisateur est mise à jour.UI latency is the time it takes from an initiated action to the time the UI is updated. Des valeurs plus petites pour la latence de l’interface utilisateur sont impératives pour qu’une application soit réactive à un utilisateur.Smaller values for UI latency are imperative for an app to feel responsive to a user. Dans une application Blazor Server, chaque action est envoyée au serveur, traitée et une comparaison d’interface utilisateur est renvoyée.In a Blazor Server app, each action is sent to the server, processed, and a UI diff is sent back. Par conséquent, la latence de l’interface utilisateur est la somme de la latence du réseau et de la latence du serveur lors du traitement de l’action.Consequently, UI latency is the sum of network latency and the server latency in processing the action.

Pour une application métier limitée à un réseau d’entreprise privé, l’effet sur les perceptions des utilisateurs de la latence en raison de la latence du réseau est généralement inperceptible.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. Pour une application déployée sur Internet, la latence peut devenir perceptible pour les utilisateurs, en particulier si les utilisateurs sont largement répartis géographiquement.For an app deployed over the Internet, latency may become noticeable to users, particularly if users are widely distributed geographically.

L’utilisation de la mémoire peut également contribuer à la latence de l’application.Memory usage can also contribute to app latency. L’augmentation de l’utilisation de la mémoire permet de garbage collection fréquentes ou la pagination de la mémoire sur le disque, qui dégradent les performances des applications et augmentent la latence de l’interface utilisateur.Increased memory usage results in frequent garbage collection or paging memory to disk, both of which degrade app performance and consequently increase UI latency. Pour plus d’informations, consultez Sécuriser les applications ASP.NET Core Blazor Server.For more information, see Sécuriser les applications ASP.NET Core Blazor Server.

Blazor applications serveur doivent être optimisées pour réduire la latence de l’interface utilisateur en réduisant la latence du réseau et l’utilisation de la mémoire. Server apps should be optimized to minimize UI latency by reducing network latency and memory usage. Pour une approche de la mesure de la latence du réseau, consultez Héberger et déployer ASP.NET Core serveur Blazor.For an approach to measuring network latency, see Héberger et déployer ASP.NET Core serveur Blazor. Pour plus d’informations sur les SignalR et les Blazor, consultez :For more information on SignalR and Blazor, see:

Connexion au serveurConnection to the server

Blazor applications serveur requièrent une connexion SignalR active au serveur. Server apps require an active SignalR connection to the server. Si la connexion est perdue, l’application tente de se reconnecter au serveur.If the connection is lost, the app attempts to reconnect to the server. Tant que l’état du client est toujours en mémoire, la session client reprend sans perte d’État.As long as the client's state is still in memory, the client session resumes without losing state.

Une application Blazor Server effectue un prérendu en réponse à la première demande du client, qui configure l’état de l’interface utilisateur sur le serveur.A Blazor Server app prerenders in response to the first client request, which sets up the UI state on the server. Lorsque le client tente de créer une connexion SignalR, le client doit se reconnecter au même serveur.When the client attempts to create a SignalR connection, the client must reconnect to the same server. Blazor applications serveur qui utilisent plusieurs serveurs principaux doivent implémenter des sessions rémanentes pour les connexions SignalR. Server apps that use more than one backend server should implement sticky sessions for SignalR connections.

Nous vous recommandons d’utiliser le service Azure SignalR pour les applications Blazor Server.We recommend using the Azure SignalR Service for Blazor Server apps. Le service permet la mise à l’échelle d’une application Blazor Server vers un grand nombre de connexions SignalR simultanées.The service allows for scaling up a Blazor Server app to a large number of concurrent SignalR connections. Les sessions rémanentes sont activées pour le service Azure SignalR en définissant l’option de ServerStickyMode ou la valeur de configuration du service sur Required.Sticky sessions are enabled for the Azure SignalR Service by setting the service's ServerStickyMode option or configuration value to Required. Pour plus d’informations, consultez Héberger et déployer ASP.NET Core serveur Blazor.For more information, see Héberger et déployer ASP.NET Core serveur Blazor.

Lorsque vous utilisez IIS, les sessions rémanentes sont activées avec Application Request Routing.When using IIS, sticky sessions are enabled with Application Request Routing. Pour plus d’informations, consultez équilibrage de charge http à l’aide de application Request Routing.For more information, see HTTP Load Balancing using Application Request Routing.

Ressources supplémentairesAdditional resources