Next.js é um framework que permite criar aplicações web de alta qualidade, aproveitando o poder dos componentes React.
⚛️ React Tradicional (SPA)
Fluxo:
Frontend (React) → Backend (API)
O frontend faz uma requisição à API; o backend retorna os dados (geralmente em JSON); o React recebe e renderiza os dados na interface.
Desvantagens:
- Tempo até o React ser injetado na página;
- Página inicialmente carregada com apenas a
<div id="root">.
🧠 Next.js (SSR)
Fluxo:
Next.js → Backend (API) → Frontend (React)
O Next atua como servidor intermediário. Ele recebe a requisição, faz chamadas à API, renderiza a página no servidor (Node.js) e envia o HTML já pronto ao cliente.
Vantagem:
- O usuário recebe a página renderizada, melhorando desempenho inicial e SEO.
🧰 Métodos de Renderização do Next.js
1. Client-Side Rendering (CSR)
Renderiza a página no navegador do usuário.
Fluxo:
- Usuário faz a request da página;
- Servidor envia HTML mínimo;
- Navegador baixa e executa o bundle JavaScript;
- Página é montada no navegador e dados são buscados.
Vantagens:
- Navegação fluida;
- Transições sem reload;
- Alta interatividade.
Desvantagens:
- SEO limitado;
- Carregamento inicial mais lento;
- Maior exposição à falhas de segurança.
2. Server-Side Rendering (SSR)
Pré-renderiza a página no servidor a cada requisição.
Fluxo:
- Usuário requisita a página;
- Servidor renderiza dinamicamente;
- HTML é enviado ao navegador;
- Scripts do Next.js são injetados (hidratação).
Vantagens:
- Excelente para SEO;
- Melhor segurança.
Desvantagens:
- Carga maior no servidor;
- APIs do browser (como
window, document) não estão disponíveis.
3. Static Site Generation (SSG)
Gera as páginas durante o build.
Fluxo:
- Páginas são geradas no build;
- Servidas por CDN ou servidor estático;
- HTML enviado diretamente ao navegador.
Vantagens:
- Alto desempenho;
- Excelente escalabilidade.
Desvantagens:
- Não ideal para conteúdo dinâmico;
- Riscos de segurança se dados sensíveis forem incluídos.
4. Incremental Static Regeneration (ISR)
Combina SSG com geração incremental, sem rebuild completo.
Fluxo:
- Define-se um tempo de revalidação;
- Após esse tempo, a página é regenerada em background.
Vantagens:
- Rápido carregamento;
- Menor carga no servidor;
- Bom para SEO.
Desvantagens:
- Possível atraso na atualização do conteúdo;
- Sem atualização em tempo real.
🗂️ Roteamento no Next.js
Next.js utiliza roteamento baseado no sistema de arquivos.
Exemplos:
-
Rota simples:
pages/blog/index.tsx → /blog
-
Rota aninhada:
pages/blog/posts/index.tsx → /blog/posts
-
Rota dinâmica:
pages/blog/posts/[slug].tsx → /blog/posts/:slug
-
Rota catch-all dinâmica:
pages/blog/posts/[...slug].tsx → /blog/posts/:slug1/:slug2/...