📡 Fetching de datos desde APIs externas

10 - 📡 Fetching de datos desde APIs externas

Aprende cómo obtener datos desde APIs externas en tus proyectos Next.js, tanto del lado del cliente (CSR) como del servidor (SSR o SSG). Veremos ejemplos prácticos con fetch y useEffect.

---

🌍 ¿Qué significa “fetching de datos”?

“Fetching de datos” se refiere a obtener información desde una fuente externa, como una API REST o una base de datos. En Next.js podemos hacerlo en diferentes momentos:

• 🔹 Durante el build — con getStaticProps (SSG)
• 🔹 En cada petición — con getServerSideProps (SSR)
• 🔹 En el navegador — usando React y useEffect (CSR)

---

📦 Ejemplo 1 — Fetch en el build con getStaticProps

Este método obtiene los datos durante el proceso de compilación, generando una página estática optimizada y rápida.

// pages/productos.js
export async function getStaticProps() {
  const res = await fetch('https://fakestoreapi.com/products?limit=3');
  const productos = await res.json();

  return { props: { productos } };
}

export default function Productos({ productos }) {
  return (
    <div className="p-4">
      <h1 className="text-2xl font-bold mb-3">🛒 Productos (SSG)</h1>
      {productos.map(prod => (
        <div key={prod.id} className="border-b pb-2 mb-2">
          <h4>{prod.title}</h4>
          <p>💲{prod.price}</p>
        </div>
      ))}
    </div>
  );
}
      

🧩 Resultado visual:

🛒 Producto A — 💲19.99

🛒 Producto B — 💲25.50

🛒 Producto C — 💲32.00

Generado en el build con datos de una API externa.

✅ Ideal para: productos, listados estáticos, contenido que no cambia con frecuencia.

---

⚙️ Ejemplo 2 — Fetch en el servidor con getServerSideProps

Este enfoque obtiene los datos en cada solicitud. Es útil cuando la información cambia frecuentemente o depende de un usuario autenticado.

// pages/noticias.js
export async function getServerSideProps() {
  const res = await fetch('https://newsapi.org/v2/top-headlines?country=us&apiKey=demo');
  const data = await res.json();

  return {
    props: { noticias: data.articles.slice(0, 3) },
  };
}

export default function Noticias({ noticias }) {
  return (
    <div className="p-4">
      <h1 className="text-2xl font-bold mb-3">📰 Últimas noticias (SSR)</h1>
      {noticias.map((n, i) => (
        <article key={i} className="border-b pb-2 mb-2">
          <h4>{n.title}</h4>
          <p>{n.source.name}</p>
        </article>
      ))}
    </div>
  );
}
      

🧩 Resultado visual:

📰 Título de noticia 1 — Fuente: CNN

📰 Título de noticia 2 — Fuente: BBC

📰 Título de noticia 3 — Fuente: Reuters

Se actualiza cada vez que el usuario accede a la página.

💡 Ideal para: datos dinámicos, noticias, estadísticas o dashboards.

---

🧠 Ejemplo 3 — Fetch del lado del cliente (CSR)

También puedes obtener datos directamente desde el navegador usando React Hooks. Esto es útil para contenido interactivo o que depende de la acción del usuario.

// pages/clientefetch.js
import { useState, useEffect } from 'react';

export default function ClienteFetch() {
  const [usuarios, setUsuarios] = useState([]);

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/users')
      .then(res => res.json())
      .then(data => setUsuarios(data.slice(0, 3)));
  }, []);

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

🧩 Resultado visual:

👥 Leanne Graham

👥 Ervin Howell

👥 Clementine Bauch

Cargado dinámicamente desde el navegador con useEffect().

⚠️ Ideal para: componentes interactivos, formularios, dashboards o búsquedas en vivo.

---

📊 Comparativa de métodos de fetching

Método	Ejecuta en	Momento	Ventajas	Desventajas
getStaticProps	Servidor (build)	Durante el build	Rápido y cacheado	No se actualiza hasta el rebuild
getServerSideProps	Servidor	En cada request	Datos siempre actualizados	Más lento, depende del servidor
useEffect (fetch)	Cliente	Después del render	Interactivo, ideal para apps SPA	No indexado por buscadores

---

💡 Consejo: puedes combinar estos métodos. Por ejemplo, usar getStaticProps para el contenido principal y useEffect para datos que cambian en tiempo real.

← Volver al índice