SSR, SSG e SPA O que é, o que fazem e onde vivem? 🫣

Olá meu nome é Luis e este é um dos meus primeiros "artigos" no TabNews.

Hoje vou tratar de explicar o que é SSR, SSG e SPA, e quais são as suas diferenças.

Para começo de historia, temos que entender que, o início da internet com os primeiros WWW (World Wide Web), tudo era estático. Uma página na internet nada mais era do que um arquivo html, com texto e alguns links ou imagens, para outras páginas.

E tava tudo OK, era legal, show de bola, até bonito de se ver para aquela época e também era o que tinhamos.

Mas, evoluimos, chegamos em um nivel que, sites estaticos podem até ser performaticos por conta do baixo processamento de arquivos html's. Mas não iriam dar conta de sites que precisam "gerar páginas dinamicamentes" com varios conteúdos diferentes.

Imaginou você por exemplo, ter um site de noticias e precisar gerar mil páginas estáticas de vários assuntos ? Imagina se alguma informação tivesse que ser atualizada ?

Apartir disso, algum crânio nesta terra, veio para a nossa salvação e decidiu criar as paginas dinamicas, que nada mais eram do que páginas web que sofriam algum tipo de alteração no momento da requisição, ou seja, você chamava a página:

-- Ô venha cá

E ela vinha com informações das quais você requisitou, de forma dinamica, sem necessidade de ficar criando manualmente outras paginas HTML sobrecarregando o servidor.

Espero ter conseguido explicar essa parte de páginas dinamicas.

Agora indo para o que interessa, essas paginas dinamicas são dividas em três:

SSR - Server Side Rendering

Esse nome grande ai é utilizado para renderizar páginas no lado do servidor. Ou seja, ele utiliza de linguagens de backend para gerar por baixo dos panos o html das páginas.

Então cada vez que o usuário vai lá e digita o endereço de um site e aperta enter, uma requisição é feita e o nosso queridão servidor fica responsável por gerar o html dessa página, e jogar na cara de quem estava buscando ( ou seja, o nosso browser).

Isso é legal até certo ponto, pois a página fica bem dinamica, mas por outro lado ... A cada reload ( o famoso f5 ou recarregar a página) que realizamos, o servidor irá receber novas requisições, ou seja podemos ter uma sobrecarga.

Outro problema é que, realizando uma requisição ao servidor para construir a página, a experiência do usuário pode ficar um tanto defasada, porque dependendo do tamanho dos dados, a pagina tende a ter seu tempo de carregamento prejudicado.

Muitos sites utilizando o SSR, e é claro, contornam estas situações com outros tipos de ferramentas ou afins.

Não entendeu e quer um exemplo mais prático ?

SSR é como se você fosse um chef de cozinha que prepara o prato diretamente na frente do cliente, assim ele pode ver todo o processo e ter certeza de que está recebendo um prato fresquinho.

Existem varios frameworks que trabalham com SSR, porem irei citar dois, o NextJs, e NuxtJs

SPA - Single Page Aplication

Acho maneiro falar "Single Page Aplication", é confortavel a pronuncia talvez 🤔

Enfim, com os SPAs chegando, toda a construção da interface da aplicação fica nas mãos do Frontend (O famoso lado do client), deixando o Backend apenas com a carga dos dados, ou seja, o seu HTML ele é carregado pelo client na hora que vocês faz a requisição, e os dados aparecem depois por conta do backEnd, e isso é super performatico e os usuários ficam:

Pensando bem, SPA é incrivel 🤔 Infelizmente ele não é perfeito, SPAs trazem um problema gigante ao SEO da página, pois utilizam de muitas rotinas Javascript.

Ou se ficar mais pratico de entender, o SPA é como se você estivesse usando um aplicativo de delivery, onde você não precisa sair da tela principal para escolher outro prato, tudo é feito ali mesmo. É tipo um prato principal com vários acompanhamentos dentro dele.

Frameworks que utilizam bem o SPA: AngularJS, ReacJs, NextJs, VueJs e claro, existem outros.

SSG - Static Site Generation

Essa é uma é boa estratégia, e tem um nomizinho bem filé também, acho que esse vai ser o nome do meu filho.

Sabe o site de noticias que a gente estava conversando ? Então ele possui milhares de requisições para realizar as buscas de dados das informações de autores, do conteudo e etc.

Você ja deve imaginar quantas requisições o nosso banco teria que fazer, mas e se eu te disse-se que o SSG é capaz de fazer isso com apenas uma requisição ?

Exato, é possivel Silvioo 🫣 Isso acontece porque no nomento do building do site, o SSG ele faz apenas uma chamada na API e todos os dados são gerados e carregaods, afim de deixar todas as páginas de forma estática.

Ou seja, SSG é tipo como se você tivesse um cardápio de restaurante escrito à mão, onde cada prato é uma página HTML prontinha para servir. Não tem muito mistério, é tudo pronto e não precisa de muita cozinha para servir.

E acabamos por aqui ❤️