Next.js

SSG vs SSR vs ISR vs CSR

Estratégias de renderização: build-time, request-time, regenerated, e client-side.

Definição

SSG (Static Site Generation): HTML gerado em build-time, servido como arquivo estático. SSR (Server-Side Rendering): HTML gerado a cada request. ISR (Incremental Static Regeneration): SSG com revalidação automática. CSR (Client-Side Rendering): HTML vazio, JS popula no browser.

Problema → Solução

Problema

Trade-offs entre performance, freshness dos dados, custo de servidor e SEO.

Solução

Escolher por página: SSG para conteúdo estático (blogs), SSR para dados sempre frescos (dashboards), ISR para conteúdo semi-estático (e-commerce), CSR para apps internos (admin).

Dica de entrevista

Tip

No App Router: padrão é SSG. Adicione fetch com cache:'no-store' ou cookies()/headers() para tornar SSR. revalidate:N para ISR.

Código

// App Router - Default SSG
async function Page() {
  const data = await fetch('https://api.com/posts');
  return <div>{data.title}</div>;
}

// SSR (sempre fresh)
async function Page() {
  const data = await fetch('https://api.com/posts',
    { cache: 'no-store' });
}

// ISR (revalida a cada 60s)
async function Page() {
  const data = await fetch('https://api.com/posts',
    { next: { revalidate: 60 } });
}

// Force SSR via dynamic
export const dynamic = 'force-dynamic';

Perguntas de entrevista

Q.Qual a diferença entre SSG e ISR?▾

A.SSG é gerado UMA vez no build — para atualizar precisa rebuildar. ISR regenera sob demanda em background, com tempo de revalidate. Usuário sempre recebe versão cacheada (rápido) e o background atualiza.

Q.SSR é sempre mais lento que SSG?▾

A.Sim — SSR exige servidor processando a cada request. Mas SSR + Streaming + cache de dados pode chegar perto. Para dados muito dinâmicos (per-user), SSR é necessário.

Q.Como decidir entre os 4?▾

A.Dado muda raramente e é igual para todos? SSG. Muda toda hora mas é igual? ISR (revalidate). Per-user ou tempo real? SSR. App interativo sem SEO? CSR.

Termos relacionados

34/122← →