Generación de Sitio Estático (SSG)

Las páginas se pre-construyen en tiempo de build para máximo rendimiento. Mejor para Blogs, Documentación y sitios de Marketing con contenido que no cambia frecuentemente.

Tiempo de Build

Obtener datos en tiempo de build
React.renderToStaticMarkup()
Almacenar HTML en CDN

Tiempo de Ejecución

🌐
Request
Response
🖥️
CDN sirve HTML estático

Cliente

Cliente envía solicitud
Cliente recibe HTML
React.hydrate()
✨Página interactiva
Beneficios x Trade-offs

Benefits

  • •Rendimiento Máximo: Carga más rápida posible
  • •Distribución CDN: Entrega global de contenido
  • •Costo Efectivo: Recursos mínimos de servidor necesarios
  • •Seguridad: Sin vulnerabilidades del lado del servidor

Trade-offs

  • •Datos obsoletos: El contenido solo se actualiza en rebuild
  • •Tiempos de build largos: Todas las páginas generadas en build
  • •Sin contenido dinámico: No se puede personalizar por usuario
  • •Reconstrucción requerida: Los cambios necesitan nuevo despliegue
¿Cómo implementar?

SSG usa Server Components asíncronos prerenderizados en tiempo de build. Para rutas dinámicas como [id], usa generateStaticParams() para generar todas las páginas estáticas en el 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>;
}
  • •Los componentes son funciones asíncronas (sin directiva 'use client')
  • •No se pueden usar hooks React (useState, useEffect, etc.)
  • •Usa 'cache: "force-cache"' en fetch para datos estáticos
  • •Las páginas se generan en tiempo de build, no en solicitud