SSG (Static Site Generation)

Definição

SSG (Static Site Generation) é uma técnica de renderização em que as páginas da aplicação são geradas como arquivos HTML estáticos durante o processo de build — ou seja, antes de qualquer requisição feita por um usuário.

Esses arquivos já prontos são então servidos diretamente por um servidor ou CDN, o que resulta em carregamento extremamente rápido e eficiente.

Frameworks como Next.js, Gatsby e Hugo oferecem suporte nativo a essa abordagem.

Objetivos do SSG

Melhorar drasticamente o tempo de carregamento da página.
Reduzir a carga no servidor, já que o conteúdo é pré-gerado.
Oferecer alta performance com baixo custo operacional.
Facilitar o SEO, pois o conteúdo já está presente no HTML entregue ao navegador.

Exemplo conceitual

Durante o build:

O framework gera páginas HTML com base nos dados disponíveis.
Os arquivos são salvos localmente ou enviados para uma CDN.

Durante o acesso:

O usuário solicita uma página.
O servidor responde imediatamente com o HTML estático correspondente.

Exemplo prático (Next.js)

// pages/post/[id].js
export async function getStaticProps({ params }) {
  const res = await fetch(`https://api.exemplo.com/post/${params.id}`);
  const post = await res.json();

  return { props: { post } };
}

export async function getStaticPaths() {
  const res = await fetch("https://api.exemplo.com/posts");
  const posts = await res.json();

  const paths = posts.map((post) => ({
    params: { id: post.id.toString() },
  }));

  return { paths, fallback: false };
}

Neste exemplo, o Next.js gera previamente todas as páginas baseadas nos dados disponíveis durante o build (getStaticPaths).
Cada uma é construída com os dados retornados por getStaticProps e servida como HTML estático no momento do acesso.

O ciclo do SSG

Durante o build, o servidor gera HTMLs completos com base nos dados.
Os arquivos são armazenados localmente ou em uma CDN.
O usuário acessa a página e recebe o HTML imediatamente.
O JavaScript (se houver) é carregado em segundo plano para interações.

Considerações importantes

Ideal para conteúdo que muda raramente, como blogs, documentações e landing pages.
Não depende de renderização em tempo real no servidor.
Se os dados mudam com frequência, é necessário reexecutar o processo de build para atualizar os arquivos.