Next.js en profundidad: CSR, SSR y generación estática

Tres estrategias, distintos costos

CSR obtiene los datos en el navegador. SSR genera HTML en cada solicitud. SSG genera HTML durante la compilación. Podés combinar las tres dentro de una aplicación.

• CSR: paneles privados y estado muy dinámico.
• SSR: datos públicos que cambian en cada solicitud.
• SSG: documentación, sitios personales y artículos conocidos al compilar.

El Pages Router

Cada archivo de pages define una ruta. _app envuelve las páginas y conserva UI compartida. _document personaliza el documento HTML del servidor y no maneja interacción. Las rutas dinámicas usan corchetes.

// pages/blog/[slug].tsx
export const getStaticPaths = async () => ({
  paths: posts.map(({ slug }) => ({ params: { slug } })),
  fallback: false,
});

export const getStaticProps = async ({ params }) => ({
  props: { post: findPost(params.slug) },
});

Elegí con evidencia

Si el contenido existe al compilar, SSG entrega HTML rápido y fácil de almacenar en caché. Si depende de la sesión, resolvelo en el cliente o en el servidor según la sensibilidad de los datos. No uses SSR por costumbre.