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.

    36

    This website collects cookies to deliver better user experience

    Angular: SSR vs SSG