Primeiros passos com Angular SSR

Angular é um framework criado no final de 2016 pelo Google escrito em TypeScript. É de código aberto, portanto, você pode encontrá-lo em GitHub. Com Angular, além de páginas Single Page Application (SAP), Progressive Web App (PWA) podem ser criadas, ou seja, funciona para desktop e mobile.

O Server Side Rendering (SSR) é executar o projeto no lado do servidor, pois só o faz no lado do cliente: A tecnologia com a qual podemos criar aplicações estáticas no lado do servidor é Angular Universal.

Neste guia irei explicar conceitos, vantagens, desvantagens e dar exemplos claros com Angular Universal.

Vantagens do Angular SSR

✅ Melhor desempenho do aplicativo: Isso é especialmente perceptível em dispositivos de baixo consumo de energia. Como o servidor é quem carrega a página da web, o Angular SSR é exibido quase imediatamente ao visualizar a página. Portanto, leva menos tempo para visualizar o conteúdo para olhar a primeira página.

✅ Melhoria em SEO: Devido à velocidade de carregamento, os motores de busca indexam com mais eficiência.

✅ Rastreamento de redes sociais aprimorado: Assim como o SEO nas páginas da web, os rastreadores apoiam as redes sociais para tornar a publicação mais atraente para os usuários.

Desvantagens

❌ Tempo de carregamento do servidor: Quando você precisa processar e reconstruir a página, leva algum tempo para aguardar o recarregamento de alguns recursos.

❌ Menos interatividade na página: Eventos e atualizações em tempo real podem exigir comunicação adicional com o servidor.

Requisitos

✅ Node.js: versão 18.17.0 ou superior.

✅ NPM: versão 9.6.7 ou superior.

✅ Angular Cli: versão 16.1.5 ou superior.

✅ Editor de código: Pode ser aquele de sua preferência. Neste caso, usarei Visual Studio Code (VSC).

Para ver as versões, execute o comando no CMD ou PowerShell:

ng version

Passo 1

• Selecionaremos a opção yes, mas a escolha é sua.
• Que tipo de folha de estilo você gostaria de usar? Neste caso, utilizando as setas direcionais, selecionaremos a primeira opção: CSS.

E pronto! Já criamos o projeto Angular.

Passo 2

Adicionar Angular Universal. O seguinte comando deve ser executado:

ng add @nguniversal/express-engine

Ao executar este comando, aparecerá a seguinte pergunta:

Você gostaria de continuar?

Você deve escrever y.

Se as mudanças puderem ser observadas desta forma, está tudo correto. Caso contrário, repita o processo.

Ao adicionar o pacote, vemos que temos novas integrações no package.json, voltadas para realizar renderização server-side. Entre elas:

• dev:ssr: Funciona para levantar o projeto. Seu equivalente do lado do cliente é script start.
• serve:ssr: Executa o script ao lado do servidor, mostrando as alterações feitas no momento.
• build:ssr: Gera a pasta dist do projeto.
• prerender: Executa o código do lado do servidor, que foi criado com o script anterior.

Os scripts são exibidos da seguinte forma:

Passo 3

Para executar o projeto, siga esta ordem:

✅ Execute na terminal:

npm run build:ssr

👉 Importante: Lembre-se de estar na raiz do projeto, onde está o package.json.

A seguir, vemos o seguinte no terminal:

Isso significa que tudo foi feito com sucesso. Caso não seja o seu caso, verifique se os passos anteriores estão corretos.

No projeto será criada uma pasta chamada dist e dentro desta será gerada outra pasta com o nome do projeto (neste caso chama-se practissg). Da mesma forma, vemos que duas pastas foram geradas. A segunda, chamada server, será aquela que executaremos com o comando:

ng run serve:ssr

Com isso podemos ver o projeto em um servidor. Para fazer isso, use Node com Express em:

http://localhost:4000

Para ver a diferença, execute:

npm run start

O projeto pode ser visto em http://localhost:4200.

Dentro do navegador, clique com o botão direito e selecione a opção visualizar o código-fonte da página ou com a combinação no Windows Ctrl + U.

Agora veremos uma comparação entre ambos, para visualizar o SSR:

Com a primeira opção você pode ver o código fonte, enquanto com a segunda vemos apenas o link para o arquivo JavaScript onde o projeto é executado.

As páginas podem ser indexadas usando Javascript?

A resposta, em última análise, é não, uma vez que o conteúdo dinâmico não pode ser indexado. Os motores de busca precisam encontrar arquivos HTML e CSS para saber o que estão identificando. Caso contrário, eles nem sequer revisarão a página, ela permanecerá inexistente para eles.

http://localhost:4000

http://localhost:4200

Levando a SSR a outro nível

Se você planeja criar sites e implementar SEO, o SSR é a melhor opção. Porque? Se você cria sites estáticos e precisa atualizar, não é aconselhável exibir a visualização completa a cada alteração. Isso não é o melhor, porque você sobrecarrega o servidor com recursos e cria uma experiência negativa para o usuário (e essa é a primeira coisa que devemos evitar).

Para evitar esses problemas, podemos usar o Incremental Static Render (ISR). Resumindo, ele está fazendo SSR, mas em tempo de execução. Abordarei esse tema em um artigo futuro.

Conclusão

Angular é um framework muito robusto e, combinado com a renderização do lado do servidor, você obterá uma ferramenta poderosa com a qual poderá criar aplicativos muito atraentes. Trabalhar com Angular Universal é simples: o framework Mantém uma comunidade muito ativa e melhorias são feitas constantemente. Portanto, você encontrará respostas para praticamente todas as dúvidas que possam surgir na hora do desenvolvimento.

Convido você a descobrir, praticar e inovar com Angular para aprimorar suas habilidades. Se você quiser ver o código completo deste artigo, dê uma olhada no repositório em GitHub.

Espero que este conteúdo seja muito útil em seus projetos. Nunca deixe de praticar todo o conhecimento para se tornar cada vez melhor 💻.

Até logo! 🚀

Referências

• Associats, C. (2023). Ventajas de trabajar con Angular Universal. CS Associats. https://www.csassociats.com/ventajas-de-trabajar-con-angular-universal/
• Jahollari, E. (2022). Incremental static Regeneration for Angular | ITNEXT. Medium. https://itnext.io/incremental-static-regeneration-for-angular-42b0a8440e53ao