DEV Community

Andres dos Santos
Andres dos Santos

Posted on

Tipos de aplicações

Tipos de Aplicação

Site estático(HTML, CSS, JS) - GatsbyJS, Hexo - Pode ser um markdown ou um HTML que ele vai gerar um site estático.
Client Side Rendering(Single Page Aplication(SPA)) - Create React App - Nós teremos um arquivo JS que é baixado no browser e ele sim vai pegar tudo do lado do client e vai renderizar os dados que vai ser renderizado na tela.
Server Side Rendering(SSR) - Next.js - Tudo é renderizado no lado do servidor, então o usuário faz uma chamada, aí ele renderiza tudo do lado do servidor e depois ele é entregue para o client.

Entendo cada um

static site generation
vantagens:

  • Uso quase nulo do servidor, tudo já foi renderizado antes pelo servidor, ou seja, ele não vai ter quase nenhum processo para ele rodar.
  • Pode ser servidor numa CDN, aí eu tenho um cache melhor, não preciso ficar buscando tudo toda hora.
  • Melhor performance entre todos.
  • Flexibilidade para usar qualquer servidor, como é HTML, CSS e JS, eles são suportados por qualquer servidor. desvantagens
  • Alto tempo de building, várias páginas demoram mais e mais para carregar.
  • Dificuldade para escalar grandes aplicações.
  • Se é necessário atualizar muito, não vai dar para fazer bem.

single page application

vantagens

  • Permite ricas interações nas páginas sem precisar recarregar, a partir do momento que é baixado o app.js não é preciso ficar dando reload, afinal, tudo vai ser feito no browser.
  • Site mais rápido depois do load inicial, depois de feito o carrgamento do app.js ele já carregou tudo que precisava.
  • Ótimo para aplicações web, muito bom para Spotify web, Twitter web, Facebook web, porque ele possui várias libs para trabalhar aqui no SPA.

desvantagens

  • O load inicial pode ser muito grande, se o arquivo JS for muito grande seu load inicial pode demorar muito.
  • Performance imprevisível, porque numa página pode ter um JS maior, em outra menor, o que deixa inconsistências na performance.
  • Dificuldade no SEO, todo site é crawleável pelo Google, por exemplo, ele precisa disso para dizer sobre o que seu site fala, só que como é necessário carregar o JS para fazer requisições e depois renderizar, você não tem um conteúdo direto ali, você tem apenas uma etapa com o esqueleto pronto e aí sim, você tem o conteúdo.
  • A maioria não é indexado.

server side rendering

vantagens

  • É ótimo em SEO, tudo é renderizado no lado do servidor, então quando o Google abre seu site ele já recebe tudo pronto e certinho ali, todo o conteúdo.
  • Meta tags com previews certos, então todos os dados de titles, images, vai estar tudo correto de acordo com aquela página em questão.
  • Melhor performance para o usuário, pode ser visto mais rápido. É tudo entregue pronto. Abriu viu!
  • Código compartilhado com o backend em Node, porque como é renderizado no SSR agente pode ter as coisas do backend com o frontend se comunicando.
  • Menor processamento no lado do usuário, tudo é renderizado e entregue pronto. A máquina do cliente vai necessitar de pouco uso da processamento.

desvantagens

  • TTFB(Time to first byte) maior, o servidor vai preparar todo o conteúdo para entregar, então como tudo fica nas mãos do servidor ele precisa fazer todos os processos.
  • HTML maior, como ele já entrega todo o HTML montado, ele vai ser maior.
  • Reload completo nas mudanças de rotas, ele precisa recarregar a cada rota passada.

O Next.js suporta todos: SSG, SPA e SSR!

Mas quando usar cada um?

SSG

  • Para um site simples, sem muitas interções com o usuário.
  • Se você for a única pessoa que publica conteúdo.
  • Se o conteúdo muda pouco.
  • Se não tiver muitas páginas.
  • Exemplos: Landing page | Blog | Portifólios

SPA

  • Quando não tem tanta necessidade de indexar informações no Google.
  • Quando o usuário faz muitas interações nas páginas e não quero refreshes.
  • Quando as informações são diferentes para cada usuários, a exemplo o Twitter web | Facebook web.

SSR

  • Quando tem a necessidade de um SPA, mas precisa de um loading mais rápido.
  • Quando o conteúdo muda frequentemente.
  • Quando trabalha com um número muito grande de páginas.
  • Quando precisar de uma boa indexações no Google.
  • Exemplos: E-Commerce | Sites de notícias

Espero que tenham entendido pessoal, qualquer dúvida, envie aí que eu estudo e te passo, vaaaleu!

Discussion (1)

Collapse
matheusregis profile image
Matheus Felipe Régis

Bom dia,
Estou desenvolvendo minha monografia referente ao comparativo entre as três aplicações (SPA, SSR e SSG)... Poderia por gentileza, me passar as referências utilizadas para escrever o artigo, ou outras que vc tenha conhecimento?

obrigado!