Angular: SSR vs SSG

Server Side Render (SSR)

Nesse modelo a renderização fica a cargo do servidor, o que torna o carregamento da aplicação mais eficiente. Além de possibilitar melhor performance, nesse modelo também podemos lidar com alguns problemas de SEO (como indexação).

Vantagens

• Indexação: é possível definir o conteúdo que será carregado a partir do servidor, sendo assim, este conteúdo seria indexado nos motores de busca.
• Aparelho do usuário: como a renderização acontece do lado do servidor, ocorre uma menor exigência do dispositivo do usuário.
• Performance: Na maioria dos casos tem boa performance e bons resultados na experiência por parte do usuário.

Desvantagens

• Time to first byte maior, já que o servidor irá preparar o conteúdo a ser carregado.
• Reload nas mudanças de rota.

Angular Universal (SSR)

Como indicação para desenvolver com SSR no Angular, indicamos o Angular Universal, inclusive o mais recomendado pela comunidade.

Bons resultados com SEO, se quisermos atingir todos os motores de buscas. Possui rastreadores de mídia social e melhora de performance.

Static Site Generation (SSG)

As vezes a utilização do modo estático para criação de páginas é o mais recomendado. Exatamente se você tiver uma aplicação que raramente sofre algum tipo de alteração em seu conteúdo. Ex: Site Institucional.

Vantagens

• Pouco uso do servidor.
• Pode ser usado como CDN.
• Ótimo SEO.
• Baixo consumo de memória, processador, etc.

Desvantagens

• Não usar caso a aplicação seja muito grande ou é alterada com frequência.

Scully (SSG)

Recomendamos o Scully caso você queira investir na criação de uma aplicação estática. O mesmo encontra-se nos padrões de boas práticas do JAMStack.

O Scully explora as rotas da sua aplicação e cria uma estrutura listada com as rotas e gera um index.html para cada uma.

Através do Scully é possível evitar longo tempo de carregamento e o tamanho da aplicação é até mesmo reduzido.

Conta também com um sistema de plugins que podem tornar sua aplicação estática mais poderosa.

Qual usar?💻

Depende.

Depende do objetivo da aplicação.
Para um site simples sem grandes modificações, recomendamos o uso do SSG. Entretanto, se o seu site tem dinamismo, você tem preocupação com indexação nos motores de busca e experiência do usuário, o ideal seria o SSR.