CSR frente a SSR frente a SSG frente a streaming: ¿las compensaciones de rendimiento?

Question

IT Interview Practice · Accepted Answer

La estrategia de renderizado decide *dónde y cuándo* se construye el HTML, lo que determina las métricas de carga. No hay un mejor universal: ajústala a cuán dinámico y personalizado sea el contenido.

## Las estrategias

```text
CSR      Server sends near-empty HTML + JS ──▶ browser fetches data ──▶ renders   (slow first paint)
SSR      Server renders full HTML per request ──▶ browser shows it ──▶ hydrates   (fresh, TTFB cost)
SSG      HTML built ONCE at deploy ──▶ served from CDN ──▶ hydrates               (fastest, static)
Stream   Server flushes HTML in chunks as ready ──▶ shell first, data fills in    (fast TTFB + fresh)
```

- **CSR (client-side)**: envía una shell vacía + JS; el navegador obtiene los datos y renderiza. Barato de alojar, pero LCP y SEO deficientes porque el contenido espera al JS.
- **SSR (server-side)**: renderiza el HTML completo por petición. Primer paint rápido y apto para SEO, y siempre fresco, pero añade TTFB (trabajo de servidor por petición) y aún necesita hidratación.
- **SSG (static)**: renderiza en tiempo de build, sirve desde un CDN. El mejor TTFB/LCP, pero el contenido es tan fresco como tu último build; **ISR** añade rebuilds periódicos/bajo demanda.
- **Streaming SSR**: envía la shell del HTML de inmediato y transmite las partes más lentas (React Suspense / `renderToPipeableStream`) para que los usuarios vean contenido mientras cargan los datos.

## Cómo elegir

| Contenido | Mejor opción |
|---------|----------|
| Marketing, docs, blog | SSG (+ ISR) |
| Personalizado, por petición | SSR / streaming |
| App muy interactiva tras autenticación | CSR o SSR + islands |

## El coste de la hidratación (trampa compartida)

SSR/SSG pintan rápido pero la página no es interactiva hasta que el JS **hidrata**: un intervalo en el que INP sufre. La hidratación parcial/progresiva y los React Server Components existen para enviar menos JS de cliente y reducir ese intervalo.

## Por qué es importante

Se espera que los seniors razonen esta compensación por superficie, no que elijan una dogmáticamente. La observación clave: un paint rápido (SSR/SSG) no significa una interactividad rápida; la hidratación es el impuesto oculto, y el streaming + los server components son la respuesta moderna para conseguir ambas cosas.

Contenido	Mejor opción
Marketing, docs, blog	SSG (+ ISR)
Personalizado, por petición	SSR / streaming
App muy interactiva tras autenticación	CSR o SSR + islands

Las estrategias

Cómo elegir

El coste de la hidratación (trampa compartida)

Por qué es importante

Preguntas relacionadas