BlazorModèles d’hébergement ASP.net CoreASP.NET Core Blazor hosting models

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 ( Blazor Server ).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). 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.

Blazor WebAssembly

Le Blazor modèle d’hébergement principal exécute côté client dans le navigateur sur Webassembly.The primary Blazor hosting model is running client-side in the browser on WebAssembly. L' Blazor application, 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.

::: No-Loc (éblouissant webassembly) :::::::: No-Loc (éblouissant) ::: app s’exécute sur un thread d’interface utilisateur dans le navigateur.

Lorsque l' Blazor WebAssembly application est créée pour le déploiement sans ASP.net Core application principale pour servir ses fichiers, l’application est appelée application autonome Blazor WebAssembly .When the Blazor WebAssembly app is created for deployment without a backend ASP.NET Core app to serve its files, the app is called a standalone Blazor WebAssembly app. Lorsque l’application est créée pour le déploiement avec une application principale pour servir ses fichiers, l’application est appelée application hébergée Blazor WebAssembly .When the app is created for deployment with a backend app to serve its files, the app is called a hosted Blazor WebAssembly app. Une application hébergée Blazor WebAssembly Client interagit généralement avec l' Server application principale sur le réseau à l’aide d’appels d’API Web ou SignalR ( Utiliser ASP.NET Core SignalR avec Blazor ).A hosted Blazor WebAssembly Client app typically interacts with the backend Server app over the network using web API calls or SignalR (Utiliser ASP.NET Core SignalR avec Blazor).

Le blazor.webassembly.js script est fourni par l’infrastructure et les handles :The blazor.webassembly.js script is provided by the framework and 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 Blazor WebAssembly modèle d’hébergement 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 une fois qu’elle a été téléchargée sur le client.The app is fully functioning after it's 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, tels que la mise en service de l’application à partir d’un réseau de distribution de contenu (CDN).Serverless deployment scenarios are possible, such as serving the app from a Content Delivery Network (CDN).

Le Blazor WebAssembly modèle d’hébergement présente les limitations suivantes :The Blazor WebAssembly hosting model has the following limitations:

  • 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.

Pour créer une Blazor WebAssembly application, consultez Outils pour ASP.NET Core Blazor .To create a Blazor WebAssembly app, see Outils pour ASP.NET Core Blazor.

Le modèle d’application hébergée Blazor prend en charge les conteneurs dockers.The hosted Blazor app model supports Docker containers. Pour la prise en charge de l’ancrage dans Visual Studio, cliquez avec le bouton droit sur le Server projet d’une solution hébergée, Blazor WebAssembly puis sélectionnez Ajouter la > prise en charge de l’ancrage.For Docker support in Visual Studio, right-click on the Server project of a hosted Blazor WebAssembly solution and select Add > Docker Support.

Blazor Server

Avec le Blazor Server modèle d’hébergement, 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 sur une SignalR connexion.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 ::: No-Loc (Signalr) ::: Connection.

L’application ASP.NET Core fait référence à la classe de l’application Startup à 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.

Sur le client, le blazor.server.js script établit la SignalR connexion avec le serveur.On the client, the blazor.server.js script establishes the SignalR connection with the server. Le script est fourni à l’application côté client à partir d’une ressource incorporée dans le ASP.NET Core Framework partagé.The script is served to the client-side app from an embedded resource in the ASP.NET Core shared framework. L’application côté client est responsable de la persistance et de la restauration de l’état de l’application en fonction des besoins.The client-side app is responsible for persisting and restoring app state as required.

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

  • La taille du téléchargement est beaucoup plus petite qu’une Blazor WebAssembly application, 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 Blazor Server applications 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.
  • La base de code .NET/C# de l’application, y compris le code du composant de l’application, n’est pas traitée aux clients.The app's .NET/C# code base, including the app's component code, isn't served to clients.

Important

Une Blazor Server application effectue un prérendu en réponse à la première demande du client, ce qui crée l’état de l’interface utilisateur sur le serveur.A Blazor Server app prerenders in response to the first client request, which creates the UI state on the server. Lorsque le client tente de créer une SignalR connexion, 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 Server les applications qui utilisent plusieurs serveurs principaux doivent implémenter des sessions rémanentes pour les SignalR connexions.Blazor Server apps that use more than one backend server should implement sticky sessions for SignalR connections. Pour plus d’informations, consultez la section connexion au serveur .For more information, see the Connection to the server section.

Le Blazor Server modèle d’hébergement présente les limitations suivantes :The Blazor Server hosting model has the following limitations:

  • 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, tels que la fourniture de l’application à partir d’un réseau de distribution de contenu (CDN).Serverless deployment scenarios aren't possible, such as serving the app from a Content Delivery Network (CDN).

Pour créer une Blazor Server application, consultez Outils pour ASP.NET Core Blazor .To create a Blazor Server app, see Outils pour ASP.NET Core Blazor.

Le Blazor Server modèle d’application prend en charge les conteneurs de l' ancrage.The Blazor Server app model supports Docker containers. Pour la prise en charge de l’ancrage dans Visual Studio, cliquez avec le bouton droit sur le projet dans Visual Studio, puis sélectionnez Ajouter la > prise en charge de l’ancrage.For Docker support in Visual Studio, right-click on the project in Visual Studio and select Add > Docker Support.

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

L’une des façons de comprendre Blazor Server les applications consiste à comprendre comment elle diffère des modèles traditionnels pour le rendu de l’interface utilisateur dans les applications de ASP.net core à l’aide de Razor vues ou de 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 Razor langage pour décrire le contenu HTML pour le rendu, mais ils diffèrent de manière significative dans le rendu du balisage.Both models use the Razor language to describe HTML content for rendering, but they significantly differ in how markup is rendered.

Quand une Razor page ou une vue est restituée, chaque ligne de Razor code é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 Blazor application 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 le code C#, le balisage et d’autres composants.A component contains C# code, markup, and other components. Lorsqu’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.Blazor 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.

Prérendu: le composant demandé Razor est compilé sur le serveur en 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 du composant est rerendu et une diff . d’interface utilisateur (différence) est calculée.The component 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 façon de créer une Blazor Server application pour garantir la meilleure utilisation de la mémoire du serveur, consultez Guide d’atténuation des menaces pour ASP.NET Core Blazor Server .For guidance on how to author a Blazor Server app to ensure the best use of server memory, see Guide d’atténuation des menaces pour ASP.NET Core Blazor Server.

CircuitsCircuits

Une Blazor Server application est générée par-dessus 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 SignalR connexions appelées circuit.Each client communicates to the server over one or more SignalR connections called a circuit. Un circuit est une Blazor abstraction sur les 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 Blazor client constate que la SignalR connexion est déconnectée, il tente de se reconnecter au serveur à l’aide d’une nouvelle SignalR connexion.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 de navigateur ou IFRAME) qui est connecté à une Blazor Server application utilise une SignalR connexion.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 Blazor Server application, chaque écran de 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 tient compte de la fermeture d’un onglet de navigateur ou de la navigation vers une URL externe un arrêt normal .Blazor 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.Blazor Server stores disconnected circuits for a configurable interval to allow the client to reconnect.

Blazor Server permet au code de définir un Gestionnaire de circuit qui permet d’exécuter du code sur les modifications de l’état du circuit d’un utilisateur.Blazor Server allows code to define a circuit handler, which allows running code on changes to the state of a user's circuit. Pour plus d’informations, consultez Blazor SignalR Aide ASP.net Core.For more information, see Blazor SignalR Aide ASP.net Core.

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 Blazor Server application, 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 d’entreprise qui est limitée à un réseau d’entreprise privé, l’effet sur les perceptions de l’utilisateur de la latence en raison de la latence du réseau est généralement inperceptible.For a 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.

Blazor Server les applications 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.Blazor 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 des ASP.NET Core Blazor Server .For an approach to measuring network latency, see Héberger et déployer des ASP.NET Core Blazor Server. Pour plus d’informations sur SignalR et Blazor , consultez :For more information on SignalR and Blazor, see:

Connexion au serveurConnection to the server

Blazor Server les applications requièrent une SignalR connexion active au serveur.Blazor 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 reste dans la mémoire du serveur, la session client reprend sans perte d’État.As long as the client's state remains in the server's memory, the client session resumes without losing state.

Une Blazor Server application effectue un prérendu en réponse à la première demande du client, ce qui crée l’état de l’interface utilisateur sur le serveur.A Blazor Server app prerenders in response to the first client request, which creates the UI state on the server. Lorsque le client tente de créer une SignalR connexion, 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 Server les applications qui utilisent plusieurs serveurs principaux doivent implémenter des sessions rémanentes pour les SignalR connexions.Blazor Server apps that use more than one backend server should implement sticky sessions for SignalR connections.

Nous vous recommandons d’utiliser le SignalR service Azure pour les Blazor Server applications.We recommend using the Azure SignalR Service for Blazor Server apps. Le service permet la mise à l’échelle d’une Blazor Server application vers un grand nombre de connexions simultanées SignalR .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 SignalR service Azure en définissant l' ServerStickyMode option 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 des ASP.NET Core Blazor Server.For more information, see Héberger et déployer des ASP.NET Core Blazor Server.

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