Renderizado del Servidor (SSR)

Las páginas se renderizan en el servidor para cada solicitud. Perfecto para E-commerce, Perfiles y aplicaciones con datos en tiempo real donde el contenido fresco y personalizado es esencial.

Servidor

🌐
Request
Response
🖥️
Servidor recibe solicitud
Servidor obtiene datos
React.renderToString()
Servidor envía HTML renderizado

Cliente

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

Benefits

  • •SEO Optimizado: Los motores de búsqueda pueden rastrear contenido
  • •Carga Inicial Rápida: HTML listo inmediatamente
  • •Compartir Social: Previews ricos para redes sociales
  • •Accesibilidad: Funciona sin JavaScript

Trade-offs

  • •Mayor carga del servidor: El servidor procesa cada solicitud
  • •Latencia aumentada: El servidor debe renderizar antes de enviar
  • •Más recursos del servidor: Requiere más CPU/memoria
  • •Más lento para alto tráfico: Cada solicitud golpea el servidor
¿Cómo implementar?

SSR usa Server Components asíncronos. En App Router, renderizado dinámico es el predeterminado para páginas con datos dinámicos.

export const dynamic = "force-dynamic";

export default async function ServerComponent() {
  const res = await fetch("https://api.example.com/data");
  const data = await res.json();

  return <div>{data.message}</div>;
}
  • •Los componentes son funciones asíncronas (sin directiva 'use client')
  • •No se pueden usar hooks React (useState, useEffect, etc.)
  • •Usa fetch() asíncrono para obtención de datos en el servidor
  • •La obtención de datos ocurre en el servidor para cada solicitud