Geração de Site Estático (SSG)

Páginas são pré-construídas no tempo de build para máxima performance. Melhor para Blogs, Documentação e sites de Marketing com conteúdo que não muda frequentemente.

Tempo de Build

Buscar dados no tempo de build
React.renderToStaticMarkup()
Armazenar HTML no CDN

Tempo de Execução

🌐
Request
Response
🖥️
CDN serve HTML estático

Cliente

Cliente envia requisição
Cliente recebe HTML
React.hydrate()
✨Página interativa
Benefícios x Trade-offs

Benefits

  • •Performance Máxima: Carregamento mais rápido possível
  • •Distribuição CDN: Entrega global de conteúdo
  • •Custo Efetivo: Recursos mínimos de servidor necessários
  • •Segurança: Sem vulnerabilidades do lado do servidor

Trade-offs

  • •Dados desatualizados: Conteúdo só atualiza no rebuild
  • •Tempos de build longos: Todas as páginas geradas no build
  • •Sem conteúdo dinâmico: Não pode personalizar por usuário
  • •Reconstrução necessária: Mudanças precisam de novo deploy
Como implementar?

SSG usa Server Components assíncronos pré-renderizados no tempo de build. Para rotas dinâmicas como [id], use generateStaticParams() para gerar todas as páginas estáticas no build.

// app/posts/[id]/page.tsx
export async function generateStaticParams() {
  return fetch('https://api.example.com/posts').then(res => res.json());
}

export default async function PostPage({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params;
  const post = await fetch(`https://api.example.com/posts/${id}`).then(res => res.json());
  return <article>{post.content}</article>;
}
  • •Componentes são funções assíncronas (sem diretiva 'use client')
  • •Não pode usar hooks React (useState, useEffect, etc.)
  • •Use 'cache: "force-cache"' no fetch para dados estáticos
  • •Páginas são geradas no tempo de build, não na requisição