Acelere seu desenvolvimento com Angular Universal e Firebase

Índice

1. Introdução
2. O que é renderização do lado servidor
3. Por que usar o Firebase com o Angular Universal
4. Configurando seu projeto Angular com o Firebase
5. Definindo as meta tags para otimização de mecanismos de busca
6. Criando o componente de detalhes do animal
7. Obtendo os dados do Firestore e definindo as meta tags
8. Lidando com a transição do lado servidor para o lado cliente
9. Configurando o Angular Universal
10. Construindo o código do servidor e servidor Express

Introdução

Neste artigo, vamos explorar como combinar o Firebase com o Angular Universal para construir um aplicativo JavaScript otimizado para mecanismos de busca. Recentemente, o AngularFire recebeu atualizações que tornam possível a renderização do lado servidor com o Universal. Isso significa que o conteúdo do nosso aplicativo pode ser entendido pelos mecanismos de busca e utilizado pelos bots de mídia social. Além disso, podemos obter ganhos no desempenho de carregamento da página. Se você é novo aqui, certifique-se de curtir e se inscrever, e também recomendo que siga o código-fonte em angularfirebase.com.

O que é renderização do lado servidor

Normalmente, deixamos o navegador lidar com a renderização do JavaScript e gerar o HTML. No entanto, isso se torna um problema quando nosso aplicativo possui rotas que precisam ser indexadas por mecanismos de busca ou compartilhadas em mídias sociais. A maioria dos bots que visitam seu site só entende HTML e não fazem nenhum esforço para analisar o JavaScript presente. Para solucionar isso, podemos fazer com que nosso aplicativo Angular se comporte mais como um aplicativo web tradicional, que responde com HTML a partir de um servidor na primeira visita à página. Neste artigo, vou mostrar como ir do zero até um aplicativo Angular Universal implantado e gerar todo o conteúdo usando uma coleção de animais armazenados em um banco de dados do Firestore. Vou avisar que temos muito código para percorrer, mas a maioria é relacionado à configuração, então você pode simplesmente copiar e colar no seu projeto. No entanto, tudo está documentado passo a passo no artigo principal, então você pode acompanhar se ficar confuso.

Por que usar o Firebase com o Angular Universal

As alterações feitas no AngularFire permitiram que o Universal funcionasse. Isso é muito importante, pois nos permite combinar o poder do Firebase com os benefícios da renderização do lado servidor. O Firebase oferece uma estrutura completa para desenvolvimento de aplicativos web, desde autenticação até banco de dados em tempo real. Com o Angular Universal, podemos fornecer uma experiência mais rica em SEO para nossos usuários e também melhorar o desempenho de carregamento das páginas.

Configurando seu projeto Angular com o Firebase

O primeiro passo é gerar um novo aplicativo Angular e garantir que ele tenha um módulo de roteamento. Em seguida, instale a versão mais recente do AngularFire 2 e do Firebase. Em seguida, envie um cartão de agradecimento para o James do Firebase, porque ele fez algumas alterações incríveis nesta biblioteca para tornar o suporte Universal possível. Após a conclusão dessas etapas, instale a plataforma do servidor do Angular. Se você estiver usando carregamento lazy, também precisará do módulo NG Universal Module Map, NG Factory Loader e TS Loader. Além disso, quando se trata de bots de mídia social, eles procurarão por meta tags no cabeçalho do documento. Você pode encontrar os requisitos específicos