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ê servirá uma versão estática da landing page dos seus aplicativos, enquanto ao mesmo tempo o aplicativo Angular completo carrega em segundo plano. A landing page será HTML puro e será exibida mesmo se o JavaScript estiver desabilitado. Mais sobre Server Rendering você pode encontrar aqui.

    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. Usar ng new ou o Interface de linha de comando Ignite UI ig new comando. Alternativamente, use ng new --ssr para criar um novo projeto Angular SSR diretamente, pulando a etapa 3.
    2. Execute ng add igniteui-angular, que instala os pacotes npm da biblioteca no seu espaço de trabalho e configura o projeto no diretório de trabalho atual para usar essa biblioteca.
    3. Adicione Angular SSR com ng add @angular/ssr.
    4. Adicionar Ignite UI for Angular- por exemplo, Grid, Calendar

    Other considerations

    • Se seu aplicativo estiver usando outros objetos específicos do navegador, envolva o uso deles em uma declaração condicional, para que eles sejam usados somente pelo Angular no navegador. Você pode fazer isso importando as funções isPlatformBrowser e isPlatformServer de @angular/common, injetando o token PLATFORM_ID no seu componente e executando as funções importadas para ver se você 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