🧠 getStaticProps, getServerSideProps y getStaticPaths

09 - 🧠 getStaticProps, getServerSideProps y getStaticPaths

Next.js ofrece funciones especiales para controlar cómo se obtienen los datos antes de renderizar las páginas. En esta lección aprenderás cómo y cuándo usar getStaticProps, getServerSideProps y getStaticPaths.

---

📘 Concepto general

Estas tres funciones permiten obtener datos antes de que la página sea renderizada. Dependiendo del tipo de renderizado que uses (SSG o SSR), se ejecutarán en el build o en cada petición al servidor.

💡 Todas estas funciones solo pueden usarse en archivos dentro de /pages (no en /app).

---

📦 getStaticProps — Generación Estática (SSG)

getStaticProps se ejecuta en el momento de compilación (build time), y permite generar páginas estáticas con datos obtenidos de una API o base de datos.

// pages/blog.js
export async function getStaticProps() {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts?_limit=3');
  const posts = await res.json();

  return {
    props: { posts }, // los datos se envían como props al componente
  };
}

export default function Blog({ posts }) {
  return (
    <div className="p-4">
      <h1 className="text-2xl font-bold mb-3">Blog (SSG)</h1>
      {posts.map(p => (
        <article key={p.id} className="border-b pb-2 mb-2">
          <h2>{p.title}</h2>
        </article>
      ))}
    </div>
  );
}
      

🧩 Resultado visual:

📝 Publicación 1

📝 Publicación 2

📝 Publicación 3

Generado durante el build, no se actualiza automáticamente.

✅ Ideal para: contenido estático, blogs o landing pages.

---

⚙️ getServerSideProps — Renderizado en el Servidor (SSR)

getServerSideProps se ejecuta en cada solicitud al servidor. Esto permite obtener datos actualizados en tiempo real, aunque puede aumentar el tiempo de respuesta.

// pages/usuarios.js
export async function getServerSideProps() {
  const res = await fetch('https://jsonplaceholder.typicode.com/users');
  const users = await res.json();

  return {
    props: { users },
  };
}

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

🧩 Resultado visual:

👤 Leanne Graham

👤 Ervin Howell

👤 Clementine Bauch

Los datos se actualizan en cada solicitud al servidor.

💡 Ideal para: paneles de administración, datos que cambian frecuentemente o usuarios autenticados.

---

🗺️ getStaticPaths — Generación de rutas dinámicas (SSG)

Cuando tienes páginas dinámicas (por ejemplo /blog/[id]), debes usar getStaticPaths junto con getStaticProps para indicar qué rutas se generan durante el build.

// pages/blog/[id].js
export async function getStaticPaths() {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts?_limit=3');
  const posts = await res.json();

  const paths = posts.map(p => ({
    params: { id: p.id.toString() },
  }));

  return {
    paths,
    fallback: false, // si es false, cualquier ruta no listada mostrará 404
  };
}

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

  return {
    props: { post },
  };
}

export default function Post({ post }) {
  return (
    <article className="p-4">
      <h1 className="text-2xl font-bold mb-3">{post.title}</h1>
      <p>{post.body}</p>
    </article>
  );
}
      

🧩 Resultado visual:

Título del post

Contenido del post generado estáticamente.

Cada ruta dinámica se crea durante el build.

⚙️ Ideal para: blogs con muchas rutas dinámicas, productos, perfiles, etc.

---

📊 Comparativa rápida

Función	Tipo de renderizado	Momento de ejecución	Uso recomendado
getStaticProps	SSG	En el build	Datos estáticos
getServerSideProps	SSR	En cada solicitud	Datos dinámicos o autenticados
getStaticPaths	SSG (dinámico)	En el build	Generar rutas dinámicas

---

💡 Consejo: si trabajas con App Router (Next.js 13+), estas funciones se reemplazan por las nuevas propiedades como generateStaticParams y fetch cache o revalidate.

← Volver al índice