Nesse módulo será introduzido o NextJS e todo seu comportamento. Também aprenderemos as vantagens de utilizar e as diferenças contra o método antigo (SPA vs. SSR).

SPA vs. SSR

SPA - Single Page Application

O SPA é o método mais antigo do React/Angular para resolver aplicações JSX. O SPA tem esse nome pois roda em apenas uma página no HTML. Como funciona?

1. Cliente acessa página
2. O código HTML, CSS e JS (React) é devolvido pela página
3. O React resolve a aplicação (estrutura, requisições, estilos) dentro do cliente.

SSR - Server Side Rendering

O SSR não é nada mais, nada menos, do que a renderização do ReactJS feita pelo Servidor. O SSR permite que os clientes tenham acesso ao servidor mesmo com o Javascript desligado.

O SSR funciona da seguinte maneira:

1. Cliente acessa a página
2. Requisição enviada para o Next.js (aplicação rodando no Node)
3. Next acessa o código React
4. O código React resolve a aplicação (estrutura, requisições, estilos)
5. O React, após resolver, devolve para o Next
6. E por último, o Next devolve para o cliente

Diferenças

Os dois métodos possuem vantagens e desvantagens. O SSR não é tão necessário em aplicações (painéis de controle) que não precisam de SEO. Já em aplicações (blog, e-commerce) que precisam dessa indexação, o SSR ajuda muito, pois no método SPA você não tem uma resposta pronta para o Google (por exemplo).