Renderização do lado do servidor com Angular SSR

    Este tópico tem como objetivo descrever o que é renderização do lado do servidor e como configurá-la no Ignite UI for Angular.

    Angular Server-side rendering

    Todos os aplicativos Angular são executados no navegador do cliente e, muitas vezes, isso pode resultar em um impacto negativo no desempenho do Largest Contentful Paint (LCP), ou seja, quando um navegador renderiza pela primeira vez o maior conteúdo de uma página. É quando Angular SSR é útil, você pode gerar o HTML completo para uma página no servidor. Ele renderiza uma página do lado do cliente para HTML no servidor que é posteriormente inicializada no cliente. Ok, mas como funciona?

    O LCP mede quando o maior conteúdo de uma página é visível para o usuário, já a métrica FCP mede quanto tempo leva para o navegador renderizar o primeiro pedaço de conteúdo DOM depois que um usuário navega para sua página. Veja Pontuação de desempenho do Lighthouse para mais informações.

    How it works?

    Com Angular SSR, você mostrará uma versão estática da página de destino dos seus aplicativos, enquanto ao mesmo tempo o Angular completo carrega em segundo plano. A página de destino será puramente HTML e será exibida mesmo que o JavaScript esteja desativado. Mais informações sobre Renderização de Servidor você pode encontrar no guia Renderização na Web.

    Usage

    A renderização do lado do servidor é uma das muitas técnicas que fazem parte das diretrizes de renderização na Web, que podem:

    • Facilite a indexação do seu site em pesquisas mais altas pelos rastreadores da web, o que melhorará sua otimização para mecanismos de busca (SEO).
    • Mostre a primeira página rapidamente - o carregamento lento da página inicial é desinteressante para os usuários (se demorar mais de 3 segundos para carregar).
    • Melhore o desempenho do seu aplicativo. Isso terá um impacto positivo tanto no First Contentful Paint quanto no Largest Contentful Paint.

    Ele oferece controle total sobre SEO e visualizações de mídia social, além de melhorar o desempenho geral percebido do seu aplicativo, permitindo que os usuários vejam uma visualização inicial pintada.

    Add SSR to existing Ignite UI application

    Step 1 - Add @angular/ssr

    Usando o esquema Angular CLI, podemos executar o seguinte comando:

    ng add @angular/ssr

    Este esquema realizará diversas alterações nas configurações do cliente e do servidor do seu aplicativo, além de adicionar arquivos extras à estrutura do projeto.

    Step 2 - Start your Angular SSR app

    Execute o seguinte comando:

    ng serve

    Build a new application from scratch

    1. Useng new o comando Ignite UI CLI ig new. Alternativamente, useng new --ssr para criar um novo projeto Angular SSR diretamente, pulando a etapa 3.
    2. Executeng add igniteui-angular, que instala os pacotes npm da biblioteca no seu workspace e configura o projeto no diretório de trabalho atual para usar essa biblioteca.
    3. Adicione Angular SSR comng add @angular/ssr isso.
    4. Adicionar Ignite UI for Angular- por exemplo, Grid, Calendar

    Other considerations

    • Se sua aplicação estiver usando outros objetos específicos do navegador, envolva o uso deles em uma instrução condicional, para que só sejam usados por Angular no navegador. Você pode fazer isso importando as funçõesisPlatformBrowser eisPlatformServer from@angular/common, injetando oPLATFORM_ID token no seu componente e executando as funções importadas para ver se está no servidor ou no navegador.
    • Se estiver usando ElementRef para manipulação de elementos HTML, não use o nativeElement para manipular atributos no elemento. Em vez disso, injete e use os métodos Renderer2.
    • Todos os URLs para solicitações do servidor devem ser absolutos. Lembre-se de que solicitações de dados de URLs relativas falharão quando executadas no servidor.
    • Para manipular eventos do navegador, a equipe Angular fornece a função withEventReplay(). Esse recurso permite capturar todos os eventos que acontecem antes da hidratação e reproduzir esses eventos quando a hidratação for concluída.
    • Se estiver usando IgxIconService para registrar ícones, certifique-se de ter configurado provideHttpClient() em seus provedores.
    • Ao usar Angular SSR, o servidor pré-renderizará páginas que serão visíveis aos usuários, no entanto, as interações serão limitadas. Uma vez que o aplicativo do lado do cliente é carregado em segundo plano, ele alternará perfeitamente de mostrar as páginas renderizadas pelo servidor para o aplicativo do lado do cliente.

    Useful resources