Server-Side Rendering (SSR): Definición, Pros, Cuándo Usar

¿Qué es Server-Side Rendering (SSR)?

Server-Side Rendering (SSR) es una estrategia rendering web donde el HTML se genera en el servidor para cada request y se envía al navegador listo para mostrarse. El navegador muestra contenido inmediatamente; JavaScript luego "hidrata" la página para hacerla interactiva. SSR contrasta con Client-Side Rendering (CSR).

SSR es el modo rendering por default para frameworks modernos como Next.js, Nuxt, SvelteKit y Remix.

Cómo funciona SSR

1. Navegador requestea /products/42
2. Servidor fetchea datos, corre tree componentes, genera HTML
3. Servidor devuelve HTML — navegador muestra inmediatamente
4. Navegador descarga bundle JavaScript
5. JS hidrata HTML — página se vuelve interactiva

SSR vs otras estrategias rendering

Cuándo SSR es la elección correcta

• Personalización per-user.
• Contenido cambiando frecuentemente.
• SEO-crítico con datos dinámicos.
• Contenido geo-localizado.
• A/B testing a nivel página.
• Lógica auth/session pesada.

Cuándo NO usar SSR

• Páginas marketing estáticas.
• Dashboards logged-in sin necesidad SEO.
• Apps muy interactivas con home page simple.

Pros y cons SSR

Hidratación: el catch SSR

Después de SSR, cliente debe "hidratar". Hidratación es cara.

SSR con Next.js (App Router)

export default async function ProductPage({ params }) {
  const product = await fetchProduct(params.id);
  return <div><h1>{product.name}</h1></div>;
}

SSR con Express + React

import { renderToString } from 'react-dom/server';

app.get('/', (req, res) => {
  const html = renderToString(<App />);
  res.send(`<div id="root">${html}</div>`);
});

Mejores prácticas SSR

• Cachear sabiamente.
• Usar streaming SSR.
• Data fetching server-only.
• Cachear queries DB server-side.
• Setear cache headers thoughtfully.
• Watchear costo hidratación.
• Manejar errores en servidor.
• Monitor TTFB + LCP.

Pitfalls SSR comunes

• Referencias window/document en código server.
• Mismatch server-client.
• Queries DB lentas bloqueando response.
• Olvidar cachear.
• Bundle bloat.
• Memory leaks.
• Auth en middleware.

FAQ: Server-Side Rendering

¿SSR o SSG: cuál es mejor?

Depende de la frescura del contenido.

¿Arregla SSR el SEO automáticamente?

Crawlers obtienen HTML, pero aún necesitas title/meta/structured data.

¿Es SSR más lento que CSR?

Para TTFB: SSR más lento. Para primer paint: SSR mucho más rápido.

¿Qué sobre TTFB con SSR?

Más alto que SSG. Mitigar con edge SSR.

¿Puedo mezclar SSR y CSR?

Sí.

¿Qué es React Server Components?

Componentes corren solo en servidor.

¿Es SSR caro de hostear?

Más que SSG. Serverless moderno lo hace barato a tráfico bajo.

Load testea apps SSR con LoadFocus

SSR shiftea trabajo al servidor — load testing es esencial. Regístrate en loadfocus.com/signup.