Modelos de hospedagem do Blazor ASP.NET Core

Este artigo explica os modelos de hospedagem Blazor, principalmente focados nos aplicativos Blazor Server e Blazor WebAssembly em versões do .NET anteriores ao .NET 8. As diretrizes neste artigo são relevantes em todas as versões do .NET para aplicativos Blazor Hybrid executados em plataformas móveis e de área de trabalho nativas. Os Blazor Web Apps no .NET 8 ou posterior são melhor definidos pela forma como os componentes Razor são renderizados, o que é descrito como o modo de renderização deles. Os modos de renderização são abordados brevemente no artigo de visão geral de Conceitos básicos e abordados detalhadamente em Modos de renderização do do ASP.NET CoreBlazor do nó Componentes.

O Blazor é uma estrutura da Web para a criação de componentes da interface do usuário da Web (Razor componentes) que podem ser hospedados de maneiras diferentes. Os componentes Razor os componentes podem ser executados no lado do servidor no ASP.NET Core (Blazor Server) em comparação com o lado do cliente no navegador em um runtime .NET baseado em WebAssembly (Blazor WebAssembly, Blazor WASM). Você também pode hospedar componentes Razor em aplicativos móveis e de área de trabalho nativos que são renderizados em um controle Web View incorporado (Blazor Hybrid). Independentemente do modelo de hospedagem, a maneira como você cria componentes Razor é a mesma. Os mesmos componentes Razor podem ser usados com qualquer um dos modelos de hospedagem inalterados.

Blazor Server

Com o modelo de hospedagem Blazor Server, os componentes são executados no servidor a partir de um aplicativo ASP.NET Core. Atualizações de interface do usuário, manipulação de eventos e chamadas JavaScript são tratadas por uma conexão SignalR usando o protocolo WebSocket. O estado no servidor associado a cada cliente conectado é chamado de circuito. Os circuitos não estão vinculados a uma conexão de rede específica e podem tolerar interrupções de rede temporárias e tentativas do cliente de se reconectar ao servidor quando a conexão é perdida.

Em um aplicativo renderizado por servidor tradicional, abrir o mesmo aplicativo em várias telas do navegador (guias ou iframes) normalmente não se traduz em demandas de recursos adicionais no servidor. Para o modelo de hospedagem Blazor Server, cada tela do navegador exige um circuito separado e instâncias separadas do estado do componente gerenciado pelo servidor. O Blazor considera fechar uma guia do navegador ou navegar para uma URL externa um términosuave. No caso de um término suave, o circuito e os recursos associados são liberados imediatamente. Um cliente também pode se desconectar de forma não suave, por exemplo, devido a uma interrupção de rede. O Blazor Server armazena circuitos desconectados em um intervalo configurável para permitir que o cliente se reconecte.

No cliente, o script Blazor estabelece a conexão SignalR com o servidor. O script é fornecido a partir de um recurso inserido na estrutura compartilhada do ASP.NET Core.

O modelo de hospedagem Blazor Server oferece vários benefícios:

• O tamanho do download é significativamente menor do que quando o modelo de hospedagem Blazor WebAssembly é usado, e o aplicativo carrega muito mais rápido.
• O aplicativo aproveita ao máximo os recursos do servidor, incluindo o uso de APIs do .NET Core.
• O .NET Core no servidor é usado para executar o aplicativo, portanto, as ferramentas .NET existentes, como a depuração, funcionam conforme o esperado.
• Há suporte para clientes finos. Por exemplo, Blazor Server funciona com navegadores que não tem suporte no WebAssembly e em dispositivos com recursos limitados.
• A base de código .NET/C# do aplicativo, incluindo o código de componente do aplicativo, não é servida aos clientes.

O modelo de hospedagem do Blazor Server traz as seguintes limitações:

• Normalmente há latência mais alta. Cada interação do usuário envolve um salto de rede.
• Não há suporte offline. Se a conexão do cliente falhar, a interatividade falhará.
• O dimensionamento de aplicativos com muitos usuários requer recursos de servidor para lidar com várias conexões e estados de cliente.
• Um servidor ASP.NET Core é necessário para atender ao aplicativo. Cenários de implantação sem servidor não são possíveis, como servir o aplicativo de uma CDN (Rede de Distribuição de Conteúdo).

Recomendamos o uso do Serviço SignalR do Azure para aplicativos que adotam o modelo de hospedagem Blazor Server. O serviço permite dimensionar um aplicativo Blazor Server para um grande número de conexões SignalR simultâneas.

Blazor WebAssembly

O modelo de hospedagem Blazor WebAssembly executa componentes do lado do cliente no navegador em um runtime .NET com base no WebAssembly. Os componentes Razor, suas dependências e o runtime do .NET são baixados para o navegador. Os componentes são executados diretamente no thread da interface do usuário do navegador. As atualizações de interface do usuário e o tratamento de eventos ocorrem no mesmo processo. Os ativos são implantados como arquivos estáticos em um servidor Web ou serviço capaz de fornecer conteúdo estático aos clientes.

Os aplicativos Web Blazor que serão utilizados no modelo de hospedagem Blazor WebAssembly podem habilitar a interatividade do lado do cliente. Quando um aplicativo é criado e executado exclusivamente no modelo de hospedagem Blazor WebAssembly sem renderização e interatividade do lado do servidor, o aplicativo é chamado de aplicativo autônomoBlazor WebAssembly.

Quando um aplicativo Blazor WebAssembly autônomo utiliza um aplicativo ASP.NET Core de back-end para servir seus arquivos, o aplicativo é chamado de aplicativo hospedadoBlazor WebAssembly. Usando Blazor WebAssembly hospedado, você obtém uma experiência de desenvolvimento na Web de pilha completa com o .NET, incluindo a capacidade de compartilhar código entre os aplicativos cliente e servidor, suporte à pré-geração e integração com o MVC e Razor Pages. Um aplicativo cliente hospedado pode interagir com seu aplicativo de servidor de back-end pela rede usando várias estruturas de mensagens e protocolos, como API Web, web gRPC e SignalR (Use o ASP.NET Core SignalR com o Blazor).

Um aplicativo Blazor WebAssembly criado como um PWA (Aplicativo Web Progressivo) usa APIs de navegador modernas para habilitar muitos dos recursos de um aplicativo cliente nativo, como trabalho offline, em execução em sua própria janela de aplicativo, inicialização no sistema operacional do host, recebimento de notificações por push e atualização automática em segundo plano.

O identificador do script Blazor:

• Baixar o runtime do .NET, os componentes Razor e as dependências do componente.
• Inicialização do runtime.

O tamanho do aplicativo publicado, seu tamanho de payload, é um fator de desempenho crítico para a utilidade do aplicativo. Um aplicativo grande leva um tempo relativamente longo para baixar para um navegador, o que afeta a experiência do usuário. O Blazor WebAssembly otimiza o tamanho do conteúdo para reduzir os tempos de download:

• O código não utilizado é retirado do aplicativo quando publicado pelo Trimmer de linguagem intermediária (IL).
• As respostas HTTP são compactadas.
• O runtime do .NET e os assemblies são armazenados em cache no navegador.

O modelo de hospedagem Blazor WebAssembly oferece vários benefícios:

• Para aplicativos Blazor WebAssembly autônomos, não existe dependência do lado do servidor .NET depois que o aplicativo é baixado do servidor, portanto, o aplicativo permanece funcional se o servidor ficar offline.
• Os recursos e capacidades do cliente são totalmente aproveitados.
• O trabalho é descarregado do servidor para o cliente.
• Para aplicativos Blazor WebAssembly autônomos, não é obrigatório ter um servidor Web ASP.NET Core para hospedar o aplicativo. Cenários de implantação sem servidor são possíveis, como servir o aplicativo de uma CDN (Rede de Distribuição de Conteúdo).

O modelo de hospedagem do Blazor WebAssembly traz as seguintes limitações:

• Os componentes Razor são restritos às capacidades do navegador.
• Hardware e software do cliente compatíveis (por exemplo, suporte ao WebAssembly) são necessários.
• O tamanho do download é maior e os componentes demoram mais para carregar.
• O código enviado ao cliente não pode ser protegido contra inspeção e adulteração pelos usuários.

O interpretador .NET Linguagem Intermediária (IL) inclui suporte do runtime parcial just-in-time (JIT) para obter um melhor desempenho do runtime. O interpretador JIT otimiza a execução dos códigos de byte do interpretador substituindo-os por pequenos blobs do código WebAssembly. O interpretador JIT é habilitado automaticamente para Blazor WebAssembly aplicativos, exceto ao depurar.

O Blazor dá suporte à compilação AOT (Ahead Of Time), em que você pode compilar seu código do .NET diretamente no WebAssembly. A compilação AOT resulta em melhorias no desempenho de runtime em detrimento de um aplicativo maior. Para obter mais informações, confira Ferramentas de criação e compilação antecipada (AOT) do Blazor WebAssemblyASP.NET Core.

As mesmas ferramentas de build do .NET WebAssembly usadas para compilação AOT também revinculam o runtime de WebAssembly do .NET para cortar o código de runtime não utilizado. Blazor também elimina o código não utilizado das bibliotecas do .NET Framework. O compilador .NET pré-compacta ainda mais um aplicativo Blazor WebAssembly autônomo para obter um conteúdo de aplicativo menor.

Os componentes Razor renderizados pelo WebAssembly podem utilizar dependências nativas criadas para execução no WebAssembly.

Blazor Hybrid

O Blazor também pode ser usado para criar aplicativos cliente nativos usando uma abordagem híbrida. Aplicativos híbridos são aplicativos nativos que aproveitam as tecnologias da Web em suas funcionalidades. Em um aplicativo Blazor Hybrid, os componentes Razor são executados diretamente no aplicativo nativo (não no WebAssembly) juntamente com qualquer outro código .NET e renderizam a interface do usuário da Web com base em HTML e CSS em um controle de Web View inserido por meio de um canal de interoperabilidade local.

Os aplicativos Blazor Hybrid podem ser criados usando diferentes estruturas de aplicativos nativos do .NET, incluindo .NET MAUI, WPF e Windows Forms. O Blazor fornece controles BlazorWebView para adicionar componentes Razor a aplicativos criados com essas estruturas. O uso do Blazor com .NET MAUI oferece uma maneira conveniente de criar aplicativos Blazor Hybrid multiplataforma para dispositivos móveis e área de trabalho; já a integração do Blazor com o WPF e o Windows Forms pode ser uma ótima maneira de modernizar aplicativos existentes.

Como os aplicativos Blazor Hybrid são aplicativos nativos, eles podem dar suporte a funcionalidades que não estão disponíveis apenas na plataforma Web. Os aplicativos Blazor Hybrid têm acesso total aos recursos de plataforma nativa por meio de APIs .NET normais. Os aplicativos Blazor Hybrid também podem compartilhar e reutilizar componentes com aplicativos Blazor Server ou Blazor WebAssembly existentes. Os aplicativos Blazor Hybrid combinam os benefícios da Web, dos aplicativos nativos e da plataforma .NET.

O modelo de hospedagem Blazor Hybrid oferece vários benefícios:

• Reutilizar componentes existentes que podem ser compartilhados em dispositivos móveis, desktop e Web.
• Aproveitar as habilidades, a experiência e os recursos de desenvolvimento da Web.
• Os aplicativos têm acesso total aos recursos nativos do dispositivo.

O modelo de hospedagem do Blazor Hybrid traz as seguintes limitações:

• Aplicativos cliente nativos diferentes devem ser criados, implantados e mantidos para cada plataforma de destino.
• Os aplicativos cliente nativos geralmente levam mais tempo para localizar, baixar e instalar comparados com um aplicativo Web em um navegador.

Para obter mais informações, confira Blazor Hybrid ASP.NET Core.

Para obter mais informações sobre estruturas de cliente nativas da Microsoft, confira os seguintes recursos:

• .NET Multi-platform App UI (.NET MAUI)
• Windows Presentation Foundation (WPF)
• Windows Forms

Qual modelo de hospedagem do Blazor devo escolher?

O modelo de hospedagem de um componente é definido por seu modo de renderização, seja no tempo de compilação ou no runtime, que é descrito com exemplos em ASP.NET Core Blazor modos de renderização. A tabela a seguir mostra as principais considerações sobre a configuração do modo de renderização para determinar o modelo de hospedagem de um componente. Para aplicativos Blazor WebAssembly autônomos, todos os componentes do aplicativo são renderizados no cliente com o modelo de hospedagem Blazor WebAssembly.

Os aplicativos Blazor Hybrid incluem aplicativos de estrutura .NET MAUI, WPF e Windows Forms.

Recurso	Blazor Server	Blazor WebAssembly (WASM)	Blazor Hybrid
Compatibilidade completa com a API do .NET	✔️Com suporte	❌Sem suporte	✔️Com suporte
Acesso direto aos recursos de servidor e rede	✔️Com suporte	❌Sem suporte†	❌Sem suporte†
Tamanho de carga pequeno com tempo de carga inicial rápido	✔️Com suporte	❌Sem suporte	❌Sem suporte
Velocidade de execução quase nativa	✔️Com suporte	✔️Com suporte‡	✔️Com suporte
Código do aplicativo seguro e privado no servidor	✔️Com suporte	❌Sem suporte†	❌Sem suporte†
Executar aplicativos offline depois de baixados	❌Sem suporte	✔️Com suporte	✔️Com suporte
Hospedagem de site estático	❌Sem suporte	✔️Com suporte	❌Sem suporte
Descarrega o processamento para clientes	❌Sem suporte	✔️Com suporte	✔️Com suporte
Acesso completo aos recursos do cliente nativo	❌Sem suporte	❌Sem suporte	✔️Com suporte
Implantação baseada na Web	✔️Com suporte	✔️Com suporte	❌Sem suporte

†Os aplicativos Blazor WebAssembly e Blazor Hybrid podem usar APIs baseadas em servidor para acessar recursos de servidor/rede e acessar código de aplicativo privado e seguro.
‡O Blazor WebAssembly atinge apenas o desempenho quase nativo com compilação AOT (antecipada).

Depois de escolher o modelo de hospedagem do aplicativo, você poderá gerar um aplicativo Blazor WebAssembly ou Blazor Server com base em um modelo de projeto do Blazor. Para obter mais informações, confira Ferramentas para Blazor do ASP.NET Core.

Para criar um aplicativo Blazor Hybrid, confira os artigos em Tutoriais Blazor Hybrid do ASP.NET Core.

Compatibilidade completa com a API do .NET

Os componentes renderizados para o modelo de hospedagem Blazor Server e aplicativos Blazor Hybrid têm compatibilidade completa com a API .NET, enquanto os componentes renderizados para Blazor WebAssembly são limitados a um subconjunto de APIs do .NET. Quando a especificação de um aplicativo exigir uma ou mais APIs .NET que não estejam disponíveis para componentes renderizados pelo WebAssembly, opte por renderizar componentes para Blazor Server ou utilizar Blazor Hybrid.

Acesso direto aos recursos de servidor e rede

Os componentes renderizados para o modelo de hospedagem Blazor Server têm acesso direto aos recursos do servidor e da rede em que o aplicativo está sendo executado. Como os componentes hospedados utilizando Blazor WebAssembly ou Blazor Hybrid são executados em um cliente, eles não têm acesso direto aos recursos do servidor e da rede. Os componentes podem acessar os recursos do servidor e da rede indiretamente por meio de APIs baseadas em servidor protegidas. As APIs baseadas em servidor podem estar disponíveis por meio de bibliotecas, pacotes e serviços de terceiros. Leve em conta as seguintes considerações:

• A implementação e manutenção de bibliotecas, pacotes e serviços de terceiros podem ser caros, ter suporte fraco ou introduzir riscos de segurança.
• Se uma ou mais APIs baseadas em servidor forem desenvolvidas internamente pela sua organização, serão necessários recursos adicionais para compilá-las e mantê-las.

Use o modelo de hospedagem Blazor Server para evitar a necessidade de expor as APIs do ambiente do servidor.

Tamanho de carga pequeno com tempo de carga inicial rápido

A renderização de componentes do servidor reduz o tamanho do conteúdo do aplicativo e melhora o tempo de carregamento inicial. Quando um tempo de carregamento inicial rápido for pretendido, use o modelo de hospedagem Blazor Server ou considere a renderização estática do lado do servidor.

Velocidade de execução quase nativa

Os aplicativos Blazor Hybrid são executados usando o runtime do .NET nativamente na plataforma de destino, que oferece a melhor velocidade possível.

Os componentes renderizados para o modelo de hospedagem Blazor WebAssembly, incluindo aplicativos Web progressivos (PWAs) e aplicativos Blazor WebAssembly autônomos, são executados utilizando o runtime do .NET para WebAssembly, que é mais lento ao invés de ser executado diretamente na plataforma. Considere usar o compilado (AOT) antecipado para melhorar o desempenho do runtime ao usar Blazor WebAssembly.

Código do aplicativo seguro e privado no servidor

A manutenção do código do aplicativo de forma segura e privada no servidor é um recurso interno dos componentes renderizados para o modelo de hospedagem Blazor Server. Os componentes renderizados usando os modelos de hospedagem Blazor WebAssembly ou Blazor Hybrid podem utilizar APIs baseadas em servidor para acessar funcionalidades que devem ser mantidas privadas e seguras. As considerações para desenvolver e manter APIs baseadas em servidor descritas na seção Acesso direto a recursos de servidor e rede se aplicam. Se o desenvolvimento e a manutenção de APIs baseadas em servidor não forem desejáveis para manter o código do aplicativo seguro e privado, renderize os componentes para o modelo de hospedagem Blazor Server.

Executar aplicativos offline depois de baixados

Aplicativos Blazor WebAssembly autônomos criados como Aplicativos Web Progressivo (PWAs) e aplicativos Blazor Hybrid podem ser executados offline, o que é particularmente útil quando os clientes não conseguem se conectar à Internet. Os componentes renderizados para o modelo de hospedagem Blazor Server não são executados quando a conexão com o servidor é perdida. Se um aplicativo precisar ser executado offline, os aplicativos autônomos Blazor WebAssembly e Blazor Hybrid são as melhores opções.

Hospedagem de site estático

A hospedagem de sites estáticos é possível com aplicativos Blazor WebAssembly autônomos porque eles são baixados para os clientes como um conjunto de arquivos estáticos. Os aplicativos Blazor WebAssembly autônomos não exigem que um servidor execute o código do lado do servidor para serem baixados e executados e podem ser entregues por meio de uma Rede de Distribuição de Conteúdo (CDN) (por exemplo, CDN do Azure).

Embora os aplicativos Blazor Hybrid sejam compilados em um ou mais ativos de implantação independentes, os ativos geralmente são fornecidos aos clientes por meio de um repositório de aplicativos de terceiros. Se a hospedagem estática for um requisito do aplicativo, selecione autônomoBlazor WebAssembly.

Descarrega o processamento para clientes

Os aplicativos Blazor WebAssembly e Blazor Hybrid são executados em clientes, ou seja, descarregam o processamento para os clientes. Os aplicativos Blazor Server são executados em um servidor, de modo que a demanda de recursos do servidor normalmente aumenta com o número de usuários e a quantidade de processamento necessária por usuário. Quando é possível descarregar a maioria ou todo o processamento de um aplicativo para os clientes e o aplicativo processa uma quantidade significativa de dados, o Blazor WebAssembly ou o Blazor Hybrid é a melhor opção.

Acesso completo aos recursos do cliente nativo

Os aplicativos Blazor Hybrid têm acesso total aos recursos de API do cliente nativo por meio de estruturas de aplicativo nativas do .NET. Em aplicativos Blazor Hybrid, os componentes Razor são executados diretamente no aplicativo nativo, não no WebAssembly. Quando recursos completos do cliente são um requisito, o Blazor Hybrid é a melhor opção.

Implantação baseada na Web

Os aplicativos Web Blazor serão atualizados na próxima atualização do aplicativo no navegador.

Aplicativos Blazor Hybrid são aplicativos cliente nativos que normalmente exigem um instalador e um mecanismo de implantação específico da plataforma.

Definição do modelo de hospedagem de um componente

Para definir o modelo de hospedagem de um componente como Blazor Server ou Blazor WebAssembly em tempo de compilação ou dinamicamente em runtime, defina seu modo de renderização. Os modos de renderização são totalmente explicados e demonstrados no artigo ASP.NET Core Blazor modos de renderização. Não recomendamos que você passe deste artigo diretamente para o artigo Modos de Renderização sem ler o conteúdo dos artigos entre esses dois artigos. Por exemplo, os modos de renderização são mais facilmente compreendidos com a análise de exemplos de componentes Razor, mas a estrutura e a função básicas dos componentes Razor não são abordadas até o artigo ASP.NET Core Blazor princípios básicos. Também é útil aprender sobre os modelos de projeto e as ferramentas do Blazor antes de trabalhar com os exemplos de componentes no artigo Modos de renderização.