Blazor - Auto Render Mode no .NET 8

Neste artigo veremos os prós e os contras do novo recurso Auto Render Mode disponível no Blazor a partir do .NET 8

Este novo recurso é uma virada de jogo, pois fornece o melhor dos dois mundos: a velocidade do Blazor Server para renderização inicial e os recursos do lado do cliente do Blazor WebAssembly para interações subsequentes.

Ao alternar de forma inteligente entre a renderização de servidor e cliente com base na situação, o modo de renderização automática eleva a experiência do usuário, reduzindo o tempo de carregamento e melhorando o desempenho interativo, tornando o Blazor um framwork ainda mais atraente para o desenvolvimento web moderno.

Se você não conhece o Blazor e esta chegando agora vou apresentar a seguir um resumo sobre os novos modos de renderização do Blazor no .NET 8.

Modos de renderização

No Blazor, a renderização pode acontecer no lado do cliente (o navegador do usuário) ou no lado do servidor (o servidor web). A renderização do lado do cliente (Blazor WebAssembly) envolve a execução do aplicativo diretamente no navegador do usuário, enquanto a renderização do lado do servidor (Blazor Server) processa o aplicativo no servidor, enviando as atualizações da UI por meio de uma conexão SignalR.

Os modos de renderização são cruciais porque afetam diretamente o desempenho, a escalabilidade e a experiência geral do usuário de um aplicativo. Por exemplo, a renderização no lado do servidor geralmente resulta em tempos de carregamento mais rápidos, mas pode sofrer latência durante as interações do usuário.

Cada modo de renderização apresenta vantagens e desvantagens:

• Blazor Server :
  - Vantagens: Carregamento inicial mais rápido, processamento no servidor.
  - Desvantagens: latência nas interações dos usuários, desafios de escalabilidade com muitos usuários.
   
• Blazor WebAssembly:
  - Vantagens: Processamento do lado do cliente, sem pós-carga de dependência do servidor.
  - Desvantagens: Carregamento inicial mais lento devido ao download do aplicativo e ao tempo de execução do .NET.
   
• Auto Render Mode:
   - Vantagens: Combina carregamento inicial mais rápido com interações do lado do cliente.
   - Desvantagens: Complexidade na configuração, potencial retorno à renderização do servidor se os recursos do cliente forem insuficientes.

Vamos ver com mais detalhes o modo de renderização Auto Render Mode.

O que é o Auto Render Mode ?

O modo de renderização automática no Blazor é uma mistura do Blazor Server e do Blazor WebAssembly, reunindo os benefícios do carregamento inicial rápido e das operações interativas do lado do cliente. Este modo é uma marca registrada do .NET 8, abordando as limitações individuais do Blazor Server e do Blazor WebAssembly. Vejamos como ele combina os recursos de ambos:

• Carga inicial rápida:
  
  O modo começa com renderização no lado do servidor, garantindo um rápido carregamento inicial da página, uma vantagem característica do Blazor Server. Isso é crucial para a retenção do usuário, pois tempos de carregamento mais rápidos podem melhorar significativamente a experiência do usuário.
   
• Transição suave para o lado do cliente:
  
  Após o carregamento inicial, o modo de renderização automática faz a transição perfeita para a renderização do lado do cliente por meio do Blazor WebAssembly. Essa transição é feita quando os recursos necessários do WebAssembly são carregados em segundo plano, permitindo operações e interações do lado do cliente sem a latência das viagens de ida e volta do servidor.
   
• Desempenho otimizado:
  
  Ao fazer a transição para a renderização do lado do cliente após o carregamento inicial, o modo de renderização automática otimiza o desempenho dos aplicativos Blazor, garantindo uma experiência de usuário responsiva e interativa. Este é um salto no sentido de reduzir os problemas de latência associados à renderização no servidor, especialmente em cenários com altas interações do usuário.
   
• Controle granular:
  
  Os desenvolvedores recebem controle granular com a capacidade de especificar modos de renderização em nível de componente usando o atributo de diretiva @rendermode. Esse nível de controle permite que os desenvolvedores ajustem o comportamento de renderização de diferentes componentes com base nos requisitos da aplicação​1​.
   
• Facilidade de configuração:
  
  A configuração do modo de renderização automática é simplificada, embora com uma abordagem estruturada. Os componentes que usam esse modo precisam ser criados a partir de um projeto cliente separado que configure o host Blazor WebAssembly, garantindo a configuração correta para que esse modo de renderização híbrido funcione de maneira ideal​2​.

Assim, o modo de renderização automática é uma orquestração cuidadosa do Blazor, preenchendo a lacuna entre a renderização inicial rápida e as operações interativas do lado do cliente, apresentando aos desenvolvedores uma estratégia de renderização robusta e eficiente no .NET 8.

Configurando o Auto Render Mode no .NET 8

O modo de renderização automática no Blazor facilita uma abordagem de renderização equilibrada, selecionando entre renderização do lado do servidor e do lado do cliente com base nas circunstâncias. Veja como configurá-lo no .NET 8:

1. Configuração do Projeto:
   
   Comece elaborando a estrutura do seu projeto Blazor para que seja propício ao modo de renderização automática. O template de projeto Blazor Web App aplica automaticamente a configuração para modos de renderização interativos, preparando o cenário para o modo de renderização automática.   
    
2. Habilite o suporte para modos de renderização interativos:
   
   No arquivo Program.cs do seu projeto, incorpore as seguintes configurações para habilitar o suporte para modos de renderização interativos:

builder.Services.AddRazorComponents()     .AddInteractiveServerComponents()     .AddInteractiveWebAssemblyComponents();   app.MapRazorComponents<App>()     .AddInteractiveServerRenderMode()     .AddInteractiveWebAssemblyRenderMode();

3. Habilitando o Auto Render Mode nas classes
   
   Usar a diretiva:  @rendermode RenderMode.InteractiveAuto

Blazor Server : @rendermode InteractiveServer 
   Blazor WebAssembly:  @rendermode InteractiveWebAssembly

Para criar o projeto no Visual Studio 2022 utilize o template Blazor Web App :

E ao definir as configurações do projeto marque as opções :

• Auto (Server and WebAssembly)
• Per page/component

Para criar o projeto usando a .NET CLI em um terminal de comandos emita o comando:

Potenciais desvantagens

Embora seja um recurso que se destaca, como qualquer tecnologia, ele apresenta um conjunto de limitações que podem potencialmente impactar sua implementação em determinados cenários:

1. Decisão pós-modo de renderização fixa:
   
   O modo de renderização automática no Blazor determina se a renderização do lado do servidor ou do cliente deve ser usada com base em certas condições, mas uma vez tomada a decisão, ela será seguida durante a vida útil do componente. Isso significa que se um componente iniciar a renderização no modo Blazor Server, ele permanecerá neste modo, e da mesma forma para Blazor WebAssembly. Não há alternância dinâmica entre modos de renderização com base nas condições variáveis durante uma sessão do usuário​1​.
    
2. Complexidade na configuração:
   
   A configuração do modo de renderização automática requer configurações específicas que podem adicionar um nível de complexidade, especialmente para desenvolvedores novos no Blazor. Por exemplo, os componentes que precisam ser executados via WebAssembly devem estar localizados em um projeto separado para evitar que os projetos do servidor sejam baixados para o navegador. Além disso, certas atualizações no arquivo Program.cs e outras configurações são necessárias para habilitar a renderização no servidor e no WebAssembly​2​.
    
3. Impacto no desempenho:
   
   O processo de tomada de decisão do modo de renderização automática, embora projetado para ser rápido, introduz um pequeno atraso ao verificar a disponibilidade dos recursos do WebAssembly. Na implementação inicial (visualização 7), uma verificação de tempo limite foi usada para determinar se o WebAssembly poderia ser carregado com rapidez suficiente (dentro de 100 ms), caso contrário, ele retornaria à renderização do servidor. Posteriormente, no RC1, o mecanismo foi atualizado para verificar se os recursos do WebAssembly estavam armazenados em cache e, em caso afirmativo, usaria o WebAssembly, caso contrário, voltaria para a renderização do servidor. Se essa verificação falhar, ela reverterá para o mecanismo de tempo limite para verificação.
    
4. Dependência de recursos do cliente e velocidade da rede:
   
   A eficácia da transição do modo de renderização automática para a renderização do lado do cliente depende muito dos recursos do cliente e da velocidade da rede. Se a máquina do cliente estiver lenta ou a rede estiver lenta, a transição para a renderização do lado do cliente poderá ser atrasada, afetando o desempenho do aplicativo.

Essas desvantagens não prejudicam os benefícios potenciais do modo de renderização automática, mas trazem à luz as considerações que os desenvolvedores devem fazer ao decidir implementar esse recurso em seus projetos Blazor.

O modo de renderização automática no Blazor, introduzido no .NET 8, serve como uma ponte entre a renderização do lado do servidor e do lado do cliente, com o objetivo de oferecer o melhor dos dois mundos, escolhendo dinamicamente o modo de renderização com base em determinadas condições. Aqui estão os pontos-chave coletados nas discussões acima:

Configuração:  O modo de renderização automática requer uma configuração estruturada no arquivo Program.cs e o uso de diretivas específicas nas classes a serem habilitadas.

Funcionalidade:  Ele escolhe inicialmente entre a renderização do lado do servidor e do lado do cliente, mas uma vez escolhido, o modo de renderização permanece fixo durante a vida útil do componente.

Benefícios: Ele combina o tempo de carregamento inicial mais rápido da renderização do servidor com as interações do lado do cliente da renderização do WebAssembly.

Desvantagens: A falta de alternância dinâmica entre os modos de renderização pós-decisão, a complexidade na configuração, o leve impacto no desempenho durante o processo de tomada de decisão e a dependência dos recursos do cliente e da velocidade da rede são algumas das limitações.

Criação do projeto: A criação e configuração do projeto para o modo de renderização automática podem ser feitas por meio do Visual Studio 2022 ou da CLI.

Verificação: A execução do aplicativo após a configuração permite a verificação da funcionalidade do modo de renderização automática, garantindo que o modo de renderização correto seja escolhido com base nas capacidades do cliente.

Desta forma o novo recurso Auto Render Mode traz muitos benefícios, e, embora venha com certas limitações, tem o potencial de melhorar a flexibilidade de renderização e a experiência do usuário em aplicativos Blazor.

E estamos conversados...

Traduzido e adaptado do original: https://danieldonbavand.com/2023/10/16/blazors-auto-render-mode-in-net-8/

"E sereis odiados por todos por amor do meu nome; mas quem perseverar até ao fim, esse será salvo."
Marcos 13:13

Referências:

• C# - Tasks x Threads. Qual a diferença

• DateTime - Macoratti.net

• Null o que é isso ? - Macoratti.net

• Formatação de data e hora para uma cultura ...

• C# - Executando Tasks - Macoratti.net

• C# - Calculando a diferença entre duas datas

• NET - Padrão de Projeto - Null Object Pattern

• C# - Fundamentos : Definindo DateTime como Null ...

• C# - Os tipos Nullable (Tipos Anuláveis)

José Carlos Macoratti