Angular Universal Na Prática – Como construir Aplicações SEO Amigáveis de Página Única com Angular

Têm-se falado muito sobre Angular nos últimos meses e como utilizá-lo para construir aplicações clientes, mas uma das suas inovações mais importantes está realmente a acontecer no servidor.

Esta é uma tecnologia que pode ajudar a habilitar um tipo totalmente novo de aplicações web: Angular Universal. Vamos descobrir mais sobre isso! Vamos rever os seguintes tópicos:

  • Vantagens dos aplicativos de página única
  • Por que não usamos aplicativos de página única em todos os lugares então?
  • Entendendo as implicações SEO de um aplicativo de página única
  • O que é Angular Universal, o que ele habilita?
  • Renderização do lado do servidor não é realmente apenas renderização no servidor
  • Uma demo de um aplicativo de uma página renderizada do lado do servidor em ação
  • Pre-renderização em tempo de compilação – upload de aplicativos pré-renderizados para o Amazon S3
  • O recurso assassino do Angular Universal: Dependency Injection
  • Conclusions

Este post é uma introdução ao Angular Universal. Para um guia mais detalhado sobre como usá-lo na prática, dê uma olhada neste post:

Angular Universal: a Complete Practical Guide

Advantages of Single Page Applications

Aplicações de página única já existem há algum tempo, e frameworks como Angular, React ou Ember são provavelmente as bibliotecas Javascript que recebem mais atenção no mundo Javascript.

As vantagens dos SPAs são realmente apenas uma coisa

As vantagens dos aplicativos de página única são potencialmente muitas:

  • Quando o usuário navega na página, apenas partes dela são substituídas, fazendo com que a experiência seja mais fluida
  • após o primeiro carregamento da página, apenas os dados passam por cima do fio quando o usuário navega no aplicativo: JSON é entregue ao navegador e aplicado aos templates HTML diretamente no navegador
  • isso leva a um melhor desempenho e abre a possibilidade desses serviços backend serem usados para outras coisas, pois eles apenas retornam dados

Nós podemos resumir isso em apenas uma coisa:

Aplicações de página única podem fornecer uma experiência de usuário muito melhor!

E a experiência do usuário é crítica no mundo público da Internet. Há inúmeros estudos que provam, sem qualquer dúvida, que o abandono da página e o abandono do usuário aumentam muito rapidamente com o atraso da página.

Se uma página leva 200ms a mais para carregar, isso terá um potencial alto impacto nos negócios e nas vendas (veja esta pesquisa do Google). Isto é ainda mais verdade em dispositivos móveis onde as aplicações tendem a ser mais lentas.

Por que não usar SPAs em todo lugar então?

Dado estas estatísticas e o fato de que os SPAs dão uma experiência de usuário muito melhorada, por que todo mundo não está usando aplicações de página única para tudo?

Têm estado por aí por anos, e qualquer site com um sistema de navegação poderia se beneficiar de ser construído dessa forma.

Entendendo as implicações SEO de um aplicativo de página única

Existe uma das principais razões pelas quais os aplicativos de página única não são usados em todos os lugares até agora (com duas causas separadas):

Aplicações de página única não funcionam bem em motores de busca

As duas razões para isso são:

O motor de busca precisa de “adivinhar” quando a página está completa

Quando uma única página é recuperada, um motor de busca só verá muito pouco HTML. Somente quando o framework MVC é iniciado é que a página será renderizada completamente usando os dados obtidos do servidor.

O problema é que o mecanismo de busca precisa adivinhar quando o framework Javascript terminar de renderizar a página, então há um risco de indexação de conteúdo incompleto.

A segunda razão pela qual os SPAs não funcionam bem com motores de busca é:

Ligações profundas da SPA são difíceis de serem indexadas

Devido à falta de suporte ao Histórico HTML5 nos browsers, aplicações de página única baseadas nas suas URLs de navegação em âncoras de marcadores HTML (URLs com #, como /home#section1). Estas não são facilmente indexadas como páginas separadas por motores de busca, existem formas de o fazer, mas é uma chatice e haverá sempre dificuldades em obter esta indexação correcta em vez de usar apenas HTML.

A conclusão pode ser que não faz sentido ter o site mais facilmente navegável se a forma como é construído impede de ter um bom SEO.

Agora as boas notícias

A boa notícia é que nenhuma destas duas razões são 100% exactas! O Google começou a indexar melhor aplicativos de página única.

E a recente depreciação do IE9 significa que o Histórico HTML5 está disponível em quase todos os lugares, fazendo o uso de URLs de âncora não mais necessárias para SPAs, podemos apenas usar URLs simples (como /home/section1).

Esta é uma ótima notícia, mas existem outros mecanismos de busca que geram tráfego significativo. O Baidu, por exemplo, conduz mais da metade do tráfego na China (atualmente 1,3 bilhões de pessoas).

Também, ainda há o problema de desempenho: um aplicativo de uma página será mais lento devido às grandes quantidades de Javascript que ele precisa e ao grande tempo de inicialização, e portanto terá um desempenho pior que uma solução baseada em HTML.

E isso significa que as páginas são abandonadas, esse problema não irá desaparecer tão cedo, especialmente no celular. Existe alguma maneira de ter o melhor de todos os mundos, e obter tanto a navegação instantânea, a facilidade de SEO e o alto desempenho no celular?

A resposta é Sim, com Angular Universal.

O que é Angular Universal, o que ele permite?

Simplesmente colocado, Angular Universal permite-nos construir aplicações que têm tanto as vantagens de performance como de envolvimento do utilizador das aplicações de uma página combinada com a facilidade de SEO das páginas estáticas.

Renderização do lado do servidor não é realmente apenas renderização no servidor

Angular Universal tem várias outras características para além de dar uma solução para renderizar HTML no servidor. Baseado no termo “server-side rendering”, podemos pensar que o que a Angular Universal faz é semelhante, por exemplo, a uma linguagem de template do lado do servidor como o Jade. Mas há muito mais funcionalidades nele.

Com o Angular Universal, você obtém aquela carga útil inicial de HTML renderizada no servidor, mas você também inicia uma versão recortada do Angular no cliente e a partir daí o Angular assume a página como um aplicativo de página única, gerando a partir daí todo o HTML no cliente ao invés do servidor.

Então o resultado final que você obtém é o mesmo, é uma aplicação de página única em execução, mas agora porque você obteve a carga HTML inicial do servidor você obtém um tempo de inicialização muito melhor e também uma aplicação totalmente indexável SEO.

Pre-renderização em tempo de compilação – upload de aplicações pré-renderizadas para o Amazon S3

Outra possibilidade que o Angular Universal abre é a pré-renderização de conteúdo que não muda frequentemente em tempo de compilação. Isto será possível usando plugins Grunt, Gulp ou Weppack. Isto é como uma configuração Gulp será, que pré-renderiza o conteúdo da nossa aplicação para um arquivo:

E então simplesmente carregue isto para um balde Amazon S3 usando o Amazon CLI:

Se ligarmos este balde a uma distribuição Cloudfront CDN, temos um site muito acessível e escalável.

E se o usuário começar a interagir com a página imediatamente?

Existe um atraso inicial entre o momento em que o HTML simples é renderizado e apresentado ao usuário e o momento em que o Angular entra no lado do cliente e assume como um SPA.

Nesse período de tempo, o usuário pode clicar em algo ou até mesmo começar a digitar em uma caixa de busca. O que Angular Universal permite através de sua funcionalidade de pré-inicialização é gravar os eventos que o usuário está acionando, e reproduzi-los uma vez que Angular chute em.

Desta forma Angular será capaz de responder a esses eventos, como por exemplo, mostrando os resultados da busca em uma lista Typeahead.

Mas como é que isto se parece no servidor em termos de código?

Como renderizar HTML com Angular no servidor

A forma como o conteúdo é renderizado no servidor é utilizando o motor de renderização Express Angular Universal expressEngine :

Tambem existe um motor Hapi disponível se preferir utilizar o Hapi em vez do Express. Existem também motores de renderização de servidores para todo o tipo de plataformas: C#, Java, PHP, veja este post anterior para mais detalhes.

Como começar com Angular Universal?

O melhor lugar para começar é o starter universal oficial, com o starter obtemos uma aplicação em execução que inclui um servidor expresso com renderização do lado do servidor a funcionar a partir da caixa.

O que é inovador em Angular Universal é a sua simplicidade de uso. Uma das principais características de design da Angular Universal é a forma como usa injeção de dependência.

Desenvolvimento de renderização lateral do servidor não é como codificar apenas para o cliente

A maioria das vezes queremos que nossa aplicação faça exatamente a mesma coisa no servidor que no cliente, não dependendo diretamente das APIs do navegador.

A realidade do desenvolvimento de renderização do lado do servidor é que isso nem sempre é possível, e existem certas coisas que queremos fazer de forma diferente no cliente e no servidor.

Toma por exemplo a renderização de um gráfico: provavelmente queres chamar uma biblioteca de terceiros que usa SVG. Não podemos chamá-la no servidor, então como podemos renderizá-la?

Outro exemplo, como podemos renderizar páginas autenticadas? Porque o conteúdo depende de quem está atualmente conectado.

Using Dependency Injection to implement Authentication

Para lidar com a autenticação, esta é uma maneira de fazê-lo:

  • No cliente queremos que a identidade do usuário seja retirada de um token disponível em um cookie ou no armazenamento local do navegador.

  • no servidor, enquanto renderiza o pedido queremos que o token de identidade seja lido a partir de um cabeçalho de pedido HTTP.

Como ter a mesma saída de página enquanto navega para essa página no cliente através de uma transição de router vs no servidor através de uma actualização do browser?

Primeiro passo é definir uma interface de serviço

O primeiro passo é definir uma interface que o seu serviço irá fornecer, que é independente do tempo de execução:

Então fornecemos duas implementações para esta interface, uma para o cliente e outra para o servidor. Por exemplo, no servidor não há nenhuma ocasião para o método de login ser chamado, então nós lançamos um erro:

Agora no cliente, nós vamos acionar a tela de bloqueio Auth0 (uma biblioteca apenas de um navegador de terceiros) para fornecer um formulário de login:

Injetamos então diferentes implementações da interface no servidor e no cliente, para a mesma injeção:

E é assim que podemos fazer algo diferente no cliente e no servidor em Angular Universal, alavancando o recipiente de injeção de dependência Angular.

Na verdade, Angular Universal é construído também usando esta noção: por exemplo, a forma como o HTML é renderizado é através da injeção de um renderizador DOM ao invés de injetar um renderizador DOM enquanto inicializa o framework, ele injeta um renderizador de servidor que gera HTML usando a biblioteca de serialização HTML parse5.

Conclusões

Como qualquer tecnologia, as vantagens da renderização do lado do servidor irão evoluir com o tempo. Mas neste momento, a renderização do lado do servidor apresenta uma grande vantagem para a construção de aplicações móveis e amigáveis, que têm um alto envolvimento do usuário devido à navegação instantânea e sem problemas.

É mais fácil do que nunca construir estes tipos de aplicações usando Angular Universal e o starter universal.

Com Angular Universal o uso da injeção de dependência torna muito simples fazer algo ligeiramente diferente no servidor do que no cliente se for necessário.

Começando com Angular

Se você quiser aprender mais sobre Angular, dê uma olhada no Curso Angular para Iniciantes:

Outros posts sobre Angular

Se você gostou deste post, aqui alguns outros posts populares em nosso blog:

  • Roteador Angular – Como Construir um Menu de Navegação com Bootstrap 4 e Rotas Aninhadas
  • Roteador Angular – Visita Guiada Estendida, Evite as armadilhas comuns
  • Componentes angulares – Os Fundamentos
  • >

  • Como executar aplicações angulares em produção hoje
  • >

  • Como construir aplicações angulares usando Serviços de Dados Observáveis – As armadilhas a evitar
  • >

  • Introdução a Formulários Angulares – Acionamento por Gabarito, Model Driven or In-Between
  • Angular ngFor – Aprenda todos os recursos incluindo trackBy, por que não é só para Arrays ?
  • >

  • Angular Universal In Practice – Como construir aplicativos de uma página SEO com Angular
  • >

  • Como funciona realmente a detecção de mudança angular?
  • >

Leave a Reply