Static Site Generation (SSG)

Core Idea

HTML gerado em build time via next build, reutilizado em cada request e cacheável por CDN; forma de prerendering recomendada como padrão sempre que possível.

Key Concepts

• Static Generation sem dados: página sem getStaticProps/getServerSideProps é automaticamente prerenderizada como HTML único no build.
• Static Generation com dados (conteúdo): usar getStaticProps quando o conteúdo da página depende de dado externo.
• Static Generation com dados (paths): usar getStaticPaths (junto com getStaticProps) quando os paths (rotas dinâmicas) dependem de dado externo.
• fallback: false: em getStaticPaths, rotas não retornadas em paths respondem 404.

Code Examples

export default function Blog({ posts }) {
  // Render posts...
}

export async function getStaticProps() {
  const res = await fetch('https://.../posts')
  const posts = await res.json()
  return { props: { posts } }
}

• O que demonstra: conteúdo da página (lista de posts) depende de dado externo buscado em build time.

export async function getStaticPaths() {
  const res = await fetch('https://.../posts')
  const posts = await res.json()
  const paths = posts.map((post) => ({ params: { id: post.id } }))
  return { paths, fallback: false }
}

• O que demonstra: paths dinâmicos (pages/posts/[id].js) determinados por dado externo em build time.

Anti-patterns

• Usar SSG para dados que mudam a cada request: se o conteúdo precisa estar sempre atualizado por request, usar Server-side Rendering ou client-side fetching em vez de Static Generation.

Key Takeaways

1. Pergunta-chave: "posso prerenderizar essa página antes da request do usuário?" Se sim, use Static Generation.
2. Casos ideais: páginas de marketing, blog posts, portfolios, listagens de e-commerce, documentação.
3. Quando dados mudam com frequência, combine SSG com client-side data fetching, ou troque para SSR.
4. getStaticPaths é obrigatório junto com getStaticProps sempre que a página usa rota dinâmica.

Connects To

• getstaticprops / getstaticpaths: referência completa das duas funções.
• automatic-static-optimization: caso especial de SSG sem getStaticProps explícito.
• server-side-rendering-ssr: alternativa quando SSG não é viável.