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!