Jun 28, 2025

Diferencia entre SSR, SSG, ISR y CSR..

¿Por qué importa la forma en que se genera una página?

La forma en que generas tus páginas afecta:

La velocidad de carga
El SEO (posicionamiento en Google)
La experiencia del usuario
El rendimiento del servidor

1. SSR: Server-Side Rendering

Qué es:
La página se genera cada vez que un usuario la visita, desde el servidor.

Ejemplo:
Imagina un sitio de noticias. Cada vez que alguien entra, el servidor genera la página con los artículos más recientes.

// Next.js
export async function getServerSideProps() {
  const res = await fetch('https://api.misitio.com/noticias');
  const noticias = await res.json();
  return { props: { noticias } };
}

Ventajas:

Siempre tiene datos actualizados.
Ideal para contenido dinámico.

Desventajas:

Puede ser más lento.
Carga al servidor.

2. SSG: Static Site Generation

Qué es:
La página se genera una sola vez al compilar el proyecto. Luego, se sirve como HTML estático.

Ejemplo:
Un blog personal. El contenido no cambia seguido, así que se genera una sola vez.

// Next.js
export async function getStaticProps() {
  const res = await fetch('https://api.misitio.com/blog');
  const posts = await res.json();
  return { props: { posts } };
}

Ventajas:

Súper rápido.
Ideal para SEO.
Sin carga al servidor.

Desventajas:

No refleja cambios nuevos hasta volver a compilar.

3. ISR: Incremental Static Regeneration

Qué es:
Es como SSG, pero puedes decirle al framework que regenere la página cada cierto tiempo.

Ejemplo:
Una tienda online donde los productos cambian cada 10 minutos.

// Next.js
export async function getStaticProps() {
  const res = await fetch('https://api.misitio.com/productos');
  const productos = await res.json();
  return {
    props: { productos },
    revalidate: 600, // cada 10 minutos
  };
}

Ventajas:

Rápido como SSG.
Más fresco que SSG.
No recarga el servidor tanto como SSR.

Desventajas:

Puede mostrar contenido no actualizado entre revalidaciones.

4. CSR: Client-Side Rendering

Qué es:
La página se muestra primero, y luego el contenido se carga desde el navegador con JavaScript.

Ejemplo:
Una app tipo dashboard, donde no importa el SEO, y todo se genera con React.

// React (CSR)
useEffect(() => {
  fetch('/api/usuario').then((res) => res.json()).then(setUsuario);
}, []);

Ventajas:

Experiencia tipo SPA (app rápida e interactiva).
Bajo uso del servidor.

Desventajas:

Malo para SEO.
El contenido puede tardar más en mostrarse.

Comparación rápida

Estrategia	¿Cuándo se genera?	¿SEO Friendly?	¿Datos actualizados?	Velocidad
SSR	En cada petición	✅	✅	🟡 Media
SSG	En build (compilación)	✅	❌	🟢 Alta
ISR	En build + cada X segundos	✅	🟢	🟢 Alta
CSR	En el navegador	❌	✅	🟠 Variable

¿Cuál deberías usar?

📰 SSR: contenido que cambia cada minuto (noticias, dashboard).
🛍️ SSG: contenido estático (blog, landing page).
🔁 ISR: contenido semi-dinámico (catálogo de productos).
📲 CSR: apps interactivas sin prioridad en SEO (admin panel, apps internas).

Conclusión

Elegir bien entre SSR, SSG, ISR y CSR puede marcar la diferencia entre una web lenta y difícil de mantener o una rápida, eficiente y bien posicionada.

Tip: Muchos proyectos modernos combinan varias estrategias para optimizar rendimiento y flexibilidad.

¿Tienes dudas sobre cuál usar en tu proyecto? Déjalo en los comentarios y te ayudo a decidir.

¿Te gustó esta guía?
Comparte este artículo con tu equipo o en tus redes para ayudar a más desarrolladores.

Palabras clave SEO: SSR vs CSR, qué es ISR, tipos de renderizado en Next.js, diferencias SSG SSR, ejemplos simples de SSR.