¿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

¿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.