Server-side rendering and hydration

Com base em nossa pesquisa anual de desenvolvedores, a renderização do lado do servidor é a oportunidade número um de melhoria para o Angular. Nos últimos meses, fizemos uma parceria com a equipe Chrome Aurora para melhorar o desempenho e DX da hidratação e renderização do lado do servidor. Hoje, temos o prazer de compartilhar a prévia do desenvolvedor de um aplicativo completo de hidratação não destrutiva!

No novo aplicativo completo de hidratação não destrutiva, o Angular não renderiza mais o aplicativo do zero. Em vez disso, a estrutura procura os nós DOM existentes enquanto cria estruturas de dados internas e anexa ouvintes de eventos a esses nós.

Os benefícios são:

• Nenhum conteúdo piscando em uma página para usuários finais
• Melhores Web Core Vitals em determinados cenários
• Arquitetura à prova de futuro que permite o carregamento de código refinado com primitivas que lançaremos ainda este ano. Atualmente, isso surge em hidratação de rota preguiçosa progressiva
• Fácil integração com aplicativos existentes, em apenas algumas linhas de código (veja o trecho de código abaixo)
• Adoção incremental de hidratação com o ngSkipHydrationatributo em templates para componentes que executam manipulação manual de DOM

Nos primeiros testes, vimos uma melhoria de até 45% na pintura de maior conteúdo com hidratação total do aplicativo!

Algumas aplicações já possibilitaram a hidratação na produção e relataram melhorias no CWV:

Para começar, é tão fácil quanto adicionar algumas linhas ao seu main.ts:

import { 
  bootstrapApplication, 
  provideClientHydration, 
} de  '@angular/platform-browser' ; 

... 

bootstrapApplication ( RootCmp , { 
  provedores : [ provideClientHydration ()] 
});

Você pode encontrar mais detalhes sobre como funciona na documentação .

Novos recursos do server-side rendering

Como parte da versão v16, também atualizamos os esquemas ng add para Angular Universal, que permite adicionar renderização do lado do servidor a projetos usando APIs independentes. Também introduzimos suporte para uma política de segurança de conteúdo mais rigorosa para estilos embutidos.

Próximas etapas do hydration e server-side rendering

Há mais que planejamos fazer aqui e o trabalho na versão 16 é apenas um trampolim. Em certos casos, há oportunidades para atrasar o carregamento do JavaScript que não é essencial para a página e hidratar os componentes associados posteriormente. Essa técnica é conhecida como hidratação parcial e vamos explorá-la a seguir.

Desde que o Qwik popularizou a ideia de retomada do framework Wiz de código fechado do Google, recebemos muitos pedidos para esse recurso no Angular. A capacidade de retomada está definitivamente em nosso radar e estamos trabalhando em estreita colaboração com a equipe Wiz para explorar o espaço. Somos cautelosos sobre as restrições à experiência do desenvolvedor, avaliando as diferentes compensações e manteremos você informado à medida que avançamos.

Você pode ler mais sobre nossos planos futuros em “ O que vem a seguir para renderização do lado do servidor em Angular ”.

Créditos blog angular