🔄 Tipos de renderizado (SSR, SSG, ISR, CSR)

08 - 🔄 Tipos de renderizado en Next.js (SSR, SSG, ISR, CSR)

Next.js ofrece múltiples estrategias de renderizado para optimizar el rendimiento y la experiencia de usuario. En esta lección aprenderás qué son SSR, SSG, ISR y CSR y cuándo usar cada uno.

---

🧠 ¿Qué significa "renderizado"?

El renderizado es el proceso por el cual una página se transforma desde código (HTML, JS, datos, etc.) hasta contenido visible en el navegador. Next.js permite decidir dónde y cuándo se genera esa página: en el servidor, en tiempo de compilación o en el cliente.

---

⚙️ SSR — Server-Side Rendering

En el Server-Side Rendering, cada solicitud del usuario genera la página en el servidor en tiempo real. Esto garantiza que el contenido esté siempre actualizado, aunque puede ser más lento que otros métodos.

// app/usuarios/page.js
export const dynamic = 'force-dynamic'; // Indica SSR en Next.js 13+

export default async function UsuariosPage() {
  const res = await fetch('https://jsonplaceholder.typicode.com/users');
  const users = await res.json();

  return (
    <div className="p-4">
      <h1 className="text-2xl font-bold mb-4">Usuarios (SSR)</h1>
      {users.map(u => (
        <p key={u.id}>👤 {u.name}</p>
      ))}
    </div>
  );
}
      

🧩 Resultado visual:

👤 Leanne Graham

👤 Ervin Howell

👤 Clementine Bauch

Generado en el servidor en cada visita.

💡 Ideal para: datos que cambian constantemente (p. ej. dashboards, noticias, precios, etc.)

---

📦 SSG — Static Site Generation

En el Static Site Generation, las páginas se generan una sola vez durante la compilación (build), y luego se sirven como HTML estático. Esto las hace extremadamente rápidas, aunque los datos no cambian hasta el próximo despliegue.

// app/blog/[id]/page.js
export const dynamic = 'force-static'; // Indica SSG

export async function generateStaticParams() {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts');
  const posts = await res.json();
  return posts.map((p) => ({ id: p.id.toString() }));
}

export default async function BlogPost({ params }) {
  const res = await fetch(`https://jsonplaceholder.typicode.com/posts/${params.id}`);
  const post = await res.json();

  return (
    <article className="p-4">
      <h1 className="text-2xl font-bold">{post.title}</h1>
      <p className="mt-2">{post.body}</p>
    </article>
  );
}
      

🧩 Resultado visual:

Ejemplo de publicación estática

Lorem ipsum dolor sit amet, consectetur adipiscing elit...

Generado una sola vez durante el build.

✅ Ideal para: blogs, páginas informativas, portfolios o documentación estática.

---

♻️ ISR — Incremental Static Regeneration

El Incremental Static Regeneration combina lo mejor de SSR y SSG. Las páginas se generan estáticamente pero pueden regenerarse automáticamente después de cierto tiempo sin reconstruir todo el sitio.

// app/productos/page.js
export const revalidate = 60; // Regenera cada 60 segundos

export default async function Productos() {
  const res = await fetch('https://fakestoreapi.com/products');
  const productos = await res.json();

  return (
    <div className="p-4">
      <h1 className="text-2xl font-bold mb-3">Productos (ISR)</h1>
      {productos.slice(0,3).map(p => (
        <p key={p.id}>🛒 {p.title}</p>
      ))}
    </div>
  );
}
      

🧩 Resultado visual:

🛒 Camiseta de algodón

🛒 Pantalón deportivo

🛒 Zapatillas running

Se regenera cada 60 segundos automáticamente.

⚡ Ideal para: catálogos, e-commerce, landing pages con datos que cambian ocasionalmente.

---

💻 CSR — Client-Side Rendering

En el Client-Side Rendering, la página se carga primero en el navegador y luego obtiene los datos desde el cliente (mediante useEffect() o peticiones AJAX). Es la técnica tradicional de React.

'use client';
import { useEffect, useState } from 'react';

export default function Comentarios() {
  const [comentarios, setComentarios] = useState([]);

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/comments?_limit=3')
      .then(res => res.json())
      .then(data => setComentarios(data));
  }, []);

  return (
    <div className="p-4">
      <h1 className="text-2xl font-bold mb-3">Comentarios (CSR)</h1>
      {comentarios.map(c => (
        <p key={c.id}>💬 {c.name}</p>
      ))}
    </div>
  );
}
      

🧩 Resultado visual:

💬 Comentario 1

💬 Comentario 2

💬 Comentario 3

Los datos se cargan desde el cliente después de renderizar.

⚙️ Ideal para: paneles interactivos, datos personalizados por usuario o componentes que dependen del navegador.

---

📊 Comparativa de estrategias de renderizado

Tipo	Momento de renderizado	Velocidad	Actualización de datos	Uso recomendado
SSR	En el servidor (cada solicitud)	⚡ Media	En tiempo real	Datos dinámicos
SSG	Durante el build	🚀 Muy alta	Solo al reconstruir	Contenido estático
ISR	Durante el build + cada X segundos	🚀 Alta	Automática	E-commerce, blogs
CSR	En el cliente (navegador)	⚡ Variable	En cada carga	Interactividad y paneles

---

💡 Consejo: puedes combinar varios tipos de renderizado en un mismo proyecto. Por ejemplo, usar SSG para las páginas públicas y CSR para el panel de usuario.

← Volver al índice