Saiba a diferença de um site estático, SPA e um SSR para começar seu projeto NextJS.

[letFlavinho]

Static Site - No momento que é clicado para abrir a página, é baixado um arquivo html, css e javascript. Esses arquivos são armazenados em um servidor simples no cliente, o CDN. Nesse CDN serão armazenados os dados para gerar as páginas estáticas.
SPA(Client Side Rendering) - Nesse caso também há um CDN mas esse CDN só vai servir para carregar arquivos básicos para o carregamento do site no caso do html, css e java script. No momento que o usuário abrir a página, serão carregados os arquivos do CDN, mas ainda uma página em branco. Em seguida será preciso fazer o carregamento dos dados em uma Rest API, mostrando na tela do usuário uma tela de loading até os dados serem carregados sem precisar abrir outra página ou carregar um novo HTML. A diferença do SPA para o Site Estático é que todo processamento e renderização é feito no navegador do usuário.
SSR(Server Side Rendering) - Nesse caso o site é chamado num servidor, o servidor recebe a chamada entende que precisa pegar os dados numa Rest API e é devolvido aquilo em forma de Array. Os dados criam um novo HTML criptografado e retorna isso para o cliente, quando o cliente recebe tudo é carregado de uma vez sem nenhuma tela de loading, mas se o usuário for navegar entre outras páginas o processo é o mesmo e será repetido.

Vantagens e Desvantagens de cada um.

Static Site
Vantagens:
-Uso quase nulo do servidor.
-Pode ser servido numa CDN(melhor cache).
-O mais leve, melhor performance para o usuário.
-Flexibilidade para usar qualquer servidor em qualquer tipo de browser.
-Pode ser usado qualquer framework staticJS.

Desvantagens:
-Tempo de build pode ser muito alto(no caso de precisar fazer várias páginas, um site com um menu navegação com 4 opções terão que ser feitas 4 páginas manualmente uma por uma).
-Dificuldade para escalar aplicações grandes.
-Dificuldade para fazer atualizações constantes.

SPA(Client Side Rendering)
Vantagens:
-Permite ricas interações em páginas sem ter que carregar pois tudo é feito no browser.
-Site rápido após o load inicial.
-Ótimo para aplicações web(exemplos: facebook, spotify, twitter).
-Possui diversas bibliotecas.

Desvantagens:
-Load inicial pode ser muito grande.
-Performance imprevisível.
-Dificuldades no SEO(dificuldade para ser indexado no google por exemplo pelo fato de ter um processo antes do carregamento do site que não permite que o google saiba o que tem ali de primeira).
-A maioria do conteúdo SPA não é indexado. Muito mais fácil uma página estática estar no topo das pesquisas do google do que uma com SPA.

SSR(Server Side Sendering)
Vantagens:
-Ótimo em SEO(Search Engine Optimization). Tudo é renderizado do lado do SEO. O google por exemplo indexa muito melhor.
-Meta tags com previews mais adequados.
-Melhor performance para o usuário. O conteúdo vai ser visto mais rápido. Comparando com o SPA, o SPA terá uma tela de loading, no caso do cliente precisar esperar até a montagem da página. No SSR tudo estará pronto assim que carregar. Nesse caso o SSR é muito mais rápido, o cliente vai receber uma montagem rápida e terá uma performance mais fluída.
-Código compartilhado com o backend em Node.
-Menor processamento no lado do usuário. Comparando com o SPA, o SPA causará um peso maior na performance do usuário pois será exigido o processamento do CDN do cliente, no caso de SSR tudo será renderizado no servidor da build. Em dispositivos mais lentos e antiquados o SSR terá uma vantagem maior.

Desvantagens:
-TTFB(Time To First Byte) maior, o servidor vai preparar todo o conteúdo para entregar.
-HTML maior.
-Reload completo nas mudanças de rota. Toda vez que o cliente fizer uma chamada a aplicação vai ter que ser recarregada.

O NextJS tem suporte para os três e essa é a sua grande vantagem, Portanto é muito importante conhecer bem cada um deles.

Quando usar cada um então?
Static - Gatsby, NextJS
Site simples sem muita interação do usuário.
Se você é a única pessoa que publica conteúdo.
Se o conteúdo muda pouco.
Se o site é simples, sem tantas páginas.
Quando a performance é extremamente importante.

Exemplos: Landing Page, Blogs, Portfólios.

Single Page Application(SPA) - CRA =
Quando não há necessidade de indexar informações no google.
Quando o usuário faz muitas interações na página e não quer refreshes.
Quando as informações são diferentes para cada usuário.
Exemplos: Twitter Web, Facebook Web, Spotify Web.

Server Side Rendering(SSR) - NextJS
Quando tem necessidade de muitas interações mas é preciso de um loading mais rápido.
Quanto o conteúdo muda frequentemente.
Quando trabalha com um número grande de páginas.
Quando precisa de uma boa indexação do google.

Exemplos: E-commerces, Sites de Notícias.

Créditos para o mestre William Justen, GÊNIO da didática.
https://www.youtube.com/watch?v=X3W-YFe2_io&t=1254s

[gfgabrielfranca]

Muito bom!!!