Aprimorando aplicativos Angular: um guia para renderização do lado do servidor (SSR) e geração de sites estáticos (SSG)

Angular é uma plataforma poderosa para a construção de aplicações web e oferece dois métodos notáveis ​​para renderização de aplicações: Renderização do Lado do Servidor (SSR) e Geração de Site Estático (SSG). Ambos os métodos visam melhorar o desempenho, principalmente em termos de tempo de carregamento e otimização para mecanismos de busca (SEO).

Renderização do lado do servidor (SSR) com Angular Universal

O SSR gera o HTML completo de uma página no servidor em resposta à navegação. Essa abordagem pode melhorar o SEO e o desempenho, especialmente em dispositivos móveis ou de baixo consumo.

Como implementar SSR no Angular:

1. Adicione Angular Universal ao seu projeto: Você pode adicionar recursos de SSR ao seu projeto Angular executando:

    ng add @nguniversal/express-engine
   

   Este comando transforma seu aplicativo em um aplicativo universal. Ele adiciona as dependências e scripts necessários ao seu package.json e cria módulos de aplicativos do lado do servidor.

2. Sirva seu aplicativo: Para atender ao seu aplicativo SSR, use:

    npm run dev:ssr
   

   ou para uma construção de produção:

    npm run build:ssr && npm run serve:ssr
   

   Esses comandos criam o aplicativo para o servidor e o cliente e, em seguida, o atendem usando o Node.js.

3. Otimizar e implantar: Depois de configurar o SSR com sucesso, talvez você queira otimizar ainda mais seu aplicativo, considerando aspectos como estado de transferência, estratégias de cache e opções de implantação.

Descobrindo o livro onde você pode saber mais sobre Angular leia agora

Geração de Site Estático (SSG) com Scully

Scully é um gerador de sites estáticos para aplicativos Angular. Ele pré-renderiza seu aplicativo em HTML estático, permitindo tempos de carregamento rápidos e SEO aprimorado.

Como implementar SSG com Scully:

1. Instalar Scully: Adicione Scully ao seu projeto Angular executando:

   ng add @scullyio/init
   

   Este comando instala o Scully e atualiza seu projeto com as configurações necessárias.

2. Configurar rotas: Scully precisa saber como lidar com suas rotas, especialmente as dinâmicas. Configure suas rotas no scully.<your-project-name>.config.ts arquivo.

3. Gerar sites estáticos: Para gerar arquivos estáticos para seu aplicativo, execute:

    npm run scully
   

   e para servi-los:

    npm run scully serve
   

   Este processo cria uma versão estática do seu site no ./dist/static diretório.

4. Implantar: Você pode implantar os arquivos estáticos gerados pelo Scully em qualquer serviço de hospedagem de sites estáticos, como Netlify, Vercel ou GitHub Pages.

Escolhendo entre SSR e SSG:

• Usar SSR quando seu conteúdo muda frequentemente e você precisa que as páginas sejam geradas dinamicamente por solicitação.
• Usar SSG quando seu conteúdo não muda com frequência, permitindo que você pré-renderize as páginas no momento da construção para desempenho e SEO ideais.

Tanto o SSR quanto o SSG podem melhorar muito o desempenho e o SEO dos seus aplicativos Angular, mas a escolha entre eles depende das necessidades específicas do seu projeto e da frequência de atualização do conteúdo.