Guía completa sobre la obtención de datos en Next.js: métodos básicos y miniproyecto

La obtención de datos en aplicaciones React estándar es bastante sencilla. Con esto quiero decir que haces una llamada a la API dentro de un componente y renderizas el resultado.

Pero Next.js lo hace de otra manera.

Lo que esto significa es que, en lugar de esperar a que se cargue la página en el navegador para recuperar tus datos, ahora realizas llamadas a la API directamente en el servidor antes de que la página web se envíe al usuario.

En esta guía, te explicaré cómo funciona la recuperación de datos en Next.js. Hablaré de la diferencia entre la recuperación del lado del servidor y del lado del cliente, de los distintos métodos que puedes usar, como la API nativa de fetch, SWR y Axios, y te contaré cuáles son las mejores prácticas.

Ah, y también voy a explicar un pequeño proyecto para que veas cómo funciona la obtención de datos en la práctica.

¿Qué es la obtención de datos en Next.js?

La obtención de datos es bastante sencilla de entender. Se trata del proceso de obtener datos de una fuente externa, por ejemplo, una base de datos o una API REST, y mostrarlos en tu propio sitio web.

Si usaste Next.js hace unos años, quizá recuerdes haber utilizado funciones como getServerSideProps o getStaticProps para recuperar tus datos. Next.js ya no las utiliza.

Ahora usa App Router y todo está construido en torno a los componentes de servidor de React. Así que… en lugar de tener que aprender un montón de funciones específicas de Next para obtener tus datos, puedes limitarte a usar JavaScript asíncrono estándar.

Con esto quiero decir que puedes llamar a la API habitual de Web Fetch desde tus componentes de servidor y dejar que Next.js se encargue del trabajo pesado.

Obtención de datos del lado del servidor frente a obtención de datos del lado del cliente: ¿Cuál debería utilizar?

A la hora de elegir entre la obtención de datos del lado del servidor y del lado del cliente , mi consejo sería empezar siempre por el servidor.

Te digo esto porque, por defecto, todos los componentes de Next.js ya son componentes de servidor de todos modos. Y, sinceramente, este es el enfoque que deberías seguir la mayor parte del tiempo.

¿Por qué?

Por un lado, es mejor para el SEO. Los motores de búsqueda pueden leer el código HTML completamente renderizado. Además, no nos olvidemos de la seguridad. Las contraseñas de tu base de datos y las claves de API permanecen ocultas en el servidor y nunca aparecen en el navegador del usuario.

Y, por último, las páginas se cargan más rápido, ya que envías mucho menos JavaScript al cliente.

¿Pero qué pasa con los componentes de cliente?

Bueno, a veces simplemente los necesitas. Por ejemplo, cuando creas una página muy interactiva o cuando necesitas usar herramientas específicas del navegador, como el almacenamiento local, entonces tienes que recurrir al cliente. Y usarlo es tan sencillo como añadir «use client» al principio de tu archivo de componentes.

Para que te resulte aún más fácil de entender, normalmente usarías la recuperación de datos del lado del cliente para cosas como un chat en directo o un panel de control en el que los datos tienen que actualizarse cada segundo.

3 formas de obtener datos en Next.js

Veamos ahora algunas formas de incorporar datos a tu aplicación. Dependiendo de lo que estés desarrollando, probablemente usarás uno de los tres métodos que voy a explicar a continuación.

Método 1: La API nativa de fetch (del lado del servidor)

Si usas App Router, lo más sensato es utilizar la API nativa de fetch dentro de un componente de servidor asíncrono.

Lo bueno de esto es que Next.js básicamente ha cogido la API estándar de «fetch» de la web y le ha añadido controles de almacenamiento en caché.

Hay algo que debes tener en cuenta: a partir de Next.js 15, las solicitudes fetch ya no se almacenan en caché por defecto, a diferencia de las versiones anteriores. Ahora se recogen datos nuevos en cada solicitud.

Aun así, puedes seguir utilizando la caché. Por ejemplo, si tienes datos estáticos y quieres almacenar en caché una solicitud para evitar que se ejecute cada vez que se carga una página, solo tienes que pasar una opción de caché forzada así:

const res = await fetch('https://api.example.com/data', { 
  cache: 'force-cache' 
});

Y si quieres que esos datos se actualicen con frecuencia por sí solos, por ejemplo, cada pocos minutos, puedes cambiar fácilmente «force-cache» por un temporizador de revalidación. Es muy flexible y ya viene integrado.

Método 2: Recopilación de datos del lado del cliente con SWR

Aunque la recopilación de datos del lado del servidor ya es lo habitual, a veces seguirás necesitando recopilar datos del lado del cliente. Ya te lo expliqué antes. Un buen ejemplo de recopilación del lado del cliente es un panel de control en tiempo real que tiene que actualizarse constantemente sin recargar la página.

En lugar de escribir un hook `useEffect` un poco complicado para gestionar la recuperación de datos del lado del cliente, lo más fácil es usar SWR (Stale-While-Revalidate). Es una biblioteca ligera creada por Vercel, que se encarga automáticamente del almacenamiento en caché y de los estados de carga.

Aquí tienes un ejemplo rápido de cómo lo usarías dentro de un componente de cliente:

'use client';
import useSWR from 'swr';
const fetcher = (url: string) => fetch(url).then(res => res.json());
export default function Dashboard() {
  const { data, error, isLoading } = useSWR('https://api.example.com/stats', fetcher);
  if (error) return <div>Error loading data</div>;
  if (isLoading) return <div>Loading...</div>;
  return <div>Active Users: {data.users}</div>;
}

Fíjate en que he añadido «use client» justo al principio de mi archivo de componentes. Lo he hecho porque SWR se basa exclusivamente en los hooks de React, y los hooks solo funcionan en el lado del cliente.

Método 3: Obtener datos con Axios

Si quieres usar una alternativa a la API fetch estándar, Axios es otra opción. Muchos desarrolladores lo prefieren simplemente porque ya están acostumbrados a usarlo en sus proyectos antiguos de React.

En mi opinión, la mayor ventaja de Axios es que analiza automáticamente los datos JSON por ti. Además, gestiona las respuestas de error de una forma más clara que la API nativa de fetch.

Por otra parte, Axios se puede usar tanto en el lado del servidor como en el del cliente, lo que lo hace muy versátil. Así es como lo usarías dentro de un componente de servidor asíncrono:

import axios from 'axios';
interface Post {
  id: number;
  title: string;
}
export default async function PostsPage() {
  // Axios automatically throws an error if the request fails
  const res = await axios.get<Post[]>('https://api.example.com/posts');
  const posts = res.data;
  return (
    <div>
      {posts.map(post => (
        <p key={post.id}>{post.title}</p>
      ))}
    </div>
  );
}

Nota rápida: como Axios es un paquete de terceros, ten en cuenta que tendrás que ejecutar «npm install axios» antes de poder utilizarlo en tu código.

Prácticas recomendadas para la obtención de datos en Next.js

Antes de pasar al miniproyecto, déjame explicarte algunas prácticas recomendadas. Si las tienes en cuenta, te ahorrarás muchos quebraderos de cabeza y harás que tu app funcione mucho más rápido y sin problemas.

1. Recoge los datos justo donde los necesites

En las aplicaciones React más antiguas, se recogían los datos en el nivel superior y se pasaban hacia abajo a través de props. Ya no hace falta que hagas eso. En su lugar, simplemente recoge los datos directamente dentro del componente que los necesita.

Next.js elimina automáticamente las duplicadas de tus peticiones. Esto significa que, aunque llames a la misma API desde tres sitios distintos, solo se realiza una única petición de red.

2. Realiza las peticiones en paralelo para evitar el efecto cascada

Si tienes dos llamadas a la API que no dependen una de otra, no tienes que esperar a que termine la primera para iniciar la segunda. En lugar de escribir llamadas ` await ` una tras otra, puedes usar ` Promise.all ` para lanzar ambas llamadas exactamente al mismo tiempo. Esto acelera considerablemente el tiempo de carga de tu página.

3. Aprovecha los archivos loading.tsx y error.tsx

Next.js tiene una forma muy clara de gestionar los estados de carga y de error. Así que, en lugar de gestionarlos manualmente, puedes añadir fácilmente un archivo loading.tsx o error.tsx a tu carpeta de rutas.

Next.js puede detectar automáticamente estos archivos y mostrar una pantalla de carga mientras se recogen los datos, además de gestionar de forma segura cualquier error si la API falla.

Te voy a enseñar cómo usar estos archivos en el miniproyecto que voy a explicar a continuación.

Mini proyecto: Cómo recuperar datos de una API REST en Next.js

Para enseñaros cómo funciona la recuperación de datos en Next.js cuando la usáis de verdad, voy a crear un mini proyecto a modo de ejemplo. Voy a hacerlo de forma sencilla y crearé una página de«Últimas entradas» que recuperará las últimas entradas de una API REST pública.

Para este proyecto, voy a usar un App Router para recuperar los datos. También añadiré una pantalla de carga temporal que aparecerá mientras se recuperan los datos.

En cuanto a mi configuración, como tengo restricciones informáticas en mi portátil del trabajo, voy a usar un binario independiente de Node.js.

Y para ejecutarlo todo localmente, usaré:

• Símbolo del sistema (CMD)
• VS Code
• Mi carpeta local de Node

Paso 1: Configurar el entorno de Next.js

Primero, voy a crear la estructura básica de mi app de Next.js. Como tengo la versión binaria independiente, le diré al Símbolo de sistema dónde está la carpeta de Node en mi portátil.

Para indicarle a este CMD dónde están mis herramientas de Node, voy a ejecutar este comando:

set PATH=%PATH%;C:\Users\abdulrehman\Downloads\node-v24.15.0-win-x64\node-v24.15.0-win-x64

Este comando le indicará al CMD la ruta donde he descomprimido mi carpeta de Node.

Para comprobar rápidamente si todo funciona, voy a ejecutar estos dos comandos uno tras otro:

node -v
npm -v

Como puedo ver los números de versión tanto de Node como de npm, por ahora todo va bien.

Ahora ya estoy listo para ejecutar los comandos estándar de Next.js. Con eso, voy a crear mi proyecto ejecutando:

npx create-next-app@latest my-blog-project

El Símbolo del sistema me pedirá ahora algunas preferencias de configuración. Para que sea más sencillo, elegiré Sí para TypeScript, ESLint, Tailwind CSS, y el Enrutador de aplicaciones.

Cuando termine el proceso de instalación, se creará una nueva carpeta llamada «my-blog-project» que contendrá todos los archivos necesarios.

Paso 2: Crear la ruta y la función «fetch»

Ahora voy a abrir la carpeta «my-blog-project» que acabo de crear en VS Code.

Ahora voy a necesitar una página para mostrar las entradas que vaya a recuperar. Para crear la página, a la que se puede acceder localmente en: localhost:3000/posts, voy a ir a la carpeta de mi aplicación y crearé una nueva carpeta llamada «posts».

Luego, dentro de la carpeta, voy a crear un archivo llamado page.tsx. Este es el archivo que contiene la interfaz de usuario.

En el archivo page.tsx, voy a escribir una función para gestionar todas las llamadas a la API REST. Para este tutorial, voy a usar la API Web Fetch para recuperar datos de esta fuente: https://jsonplaceholder.typicode.com/posts.

La fuente que he mencionado es un servicio gratuito y de acceso público llamado JSONPlaceholder. Como su nombre indica, ofrece datos ficticios que los desarrolladores pueden usar para probar sus aplicaciones sin tener que recurrir a una base de datos real.

Este es el código que voy a añadir a mi archivo page.tsx:

// Define the shape of the data I expect from the API
type Post = {
  id: number;
  title: string;
  body: string;
};
// My asynchronous fetch function
async function getPosts() {
  const response = await fetch('https://jsonplaceholder.typicode.com/posts', {
    // Re-fetch the data every hour (3600 seconds)
    next: { revalidate: 3600 } 
  });
  if (!response.ok) {
    throw new Error('Failed to fetch posts');
  }
  return response.json();
}

Ahora que ya he añadido la lógica de recuperación al archivo, lo siguiente que voy a hacer es crear la interfaz de usuario que llamará a mi función de recuperación para mostrar los datos obtenidos.

Paso 3: Crear el componente del servidor

Ahora voy a crear la lógica para mostrar las entradas que se van a recuperar en la página que he creado antes.

Para ello, voy a usar la función getPosts() para recuperar los datos. Después, voy a usar la función map() para recorrer las entradas. Y, por último, mostraré cada entrada en una tarjeta con el estilo de Tailwind CSS.

Este es el código de la función getPosts() que voy a añadir a mi archivo page.tsx, justo debajo de la función fetch:

export default async function PostsPage() {
  // Call the fetch function and wait for the data
  const posts: Post[] = await getPosts();
  return (
    <main className="p-10 max-w-4xl mx-auto">
      <h1 className="text-3xl font-bold mb-6">Latest Posts</h1>
      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        {/* Loop through the first 6 posts for display */}
        {posts.slice(0, 6).map((post) => (
          <div key={post.id} className="border p-6 rounded-lg shadow-sm">
            <h2 className="text-xl font-semibold capitalize mb-2">{post.title}</h2>
            <p className="text-gray-600">{post.body}</p>
          </div>
        ))}
      </div>
    </main>
  );
}

A estas alturas, mi página ya está lista y debería mostrar las entradas correctamente. Sin embargo, si la API tarda más de lo habitual en responder, mis usuarios no verán nada mientras se cargan los datos. Para mejorar la experiencia del usuario, ahora voy a añadir un estado de carga.

Paso 4: Añadir un estado de carga automático

Next.js facilita la gestión de los estados de carga mediante una convención especial de archivos, así que no tengo que lidiar con estados complejos de React.

Para añadir el estado de carga, dentro de mi carpeta app/posts, voy a crear un nuevo archivo llamado loading.tsx.

Lo que esto va a hacer es permitir que Next.js detecte mi archivo loading.tsx y muestre su contenido mientras el componente PostsPage espera a que termine la llamada a la API REST.

Voy a añadir este código al archivo loading.tsx para que aparezca un mensaje sencillo que diga «Cargando entradas…» mientras se recogen los datos:

export default function Loading() {
  return (
    <div className="p-10 max-w-4xl mx-auto">
      <h1 className="text-3xl font-bold mb-6">Latest Posts</h1>
      <div className="text-lg text-blue-600 font-semibold animate-pulse">
        Fetching posts from the API...
      </div>
    </div>
  );
}

A estas alturas, ya está todo listo. Tengo una función para recuperar entradas, un componente para mostrarlas y un mensaje de carga temporal para mejorar la experiencia del usuario.

Ahora lo único que tengo que hacer es poner en marcha el servidor de desarrollo local para probar lo que he creado.

Paso 5: Ejecutar y probar la aplicación

Vale… es hora de probarlo. Volveré al CMD y me desplazaré a la carpeta de mi proyecto. Para ello, escribiré «cd my-blog-project».

Nota rápida: Como ya configuré mi variable PATH antes, en el paso 1, la ventana del símbolo del sistema ya sabe dónde están mis herramientas de Node.js.

Bueno… ahora ya puedo poner en marcha el servidor de desarrollo ejecutando:

npm run dev

En cuanto se inicie el servidor, abriré esta URL en mi navegador: http://localhost:3000/posts.

Y si todo ha funcionado bien, cuando se cargue la página, debería ver una cuadrícula con las seis últimas entradas, recuperadas directamente de la API REST.

Y, como puedes ver en la captura de pantalla de abajo, funciona.

Para resumir rápidamente cómo funciona todo: Next.js ha recuperado los datos mediante la API REST, los ha insertado en las tarjetas diseñadas con Tailwind y le ha enviado el código HTML ya generado a mi navegador.

Paso 6: Subir el código a GitHub e implementarlo en Cloudways Velocity

Como todo funciona bien en mi entorno local, voy a poner este proyecto en producción. Voy a subir el código a GitHub y luego lo implementaré en el alojamiento gestionado de Node.js de Cloudways (Velocity).

Subir el código a GitHub

Primero, iré a GitHub y crearé un nuevo repositorio. Después, abriré la línea de comandos, detendré el servidor de desarrollo y ejecutaré los comandos estándar de Git para subir los archivos de mi proyecto al nuevo repositorio.

Iniciar la aplicación en Cloudways

A continuación, iré a mi panel de control de Cloudways para crear una nueva aplicación de Node.js. En el menú de la izquierda, haré clic en «Velocity» y pulsaré «Empezar».

Entonces elegiré el plan básico y haré clic en «Continuar».

Voy a conectar mi repositorio de GitHub

:
. Ahora tengo que vincular mi código. Cloudways te ofrece la opción de conectarte a GitHub, GitLab o Bitbucket. Como mi código está en GitHub, me voy a conectar ahí.

En cuanto tenga conectado mi Git, elegiré mi repositorio en el menú desplegable y haré clic en «Continuar».

Cloudways configura automáticamente los ajustes de mi app. Establece el framework en Next.js SSR, la rama en «main» y utiliza Node 24 (LTS). No tengo que configurar nada de esto a mano.

Para implementar la aplicación

, ahora voy a hacer clic en «Implementar ahora» y Cloudways empezará a descargar el código de mi GitHub, instalará todas las dependencias de npm, ejecutará el comando de compilación e iniciará el servidor.

Echa un vistazo a la página en vivo

. En cuanto termine la implementación, copiaré la URL temporal de la página de resumen de la aplicación en el panel de control.

Ahora, cuando abra esa URL seguida de /posts en una nueva pestaña del navegador, debería ver exactamente la misma página «Últimas entradas» que recupera datos de la API REST, igual que lo hacía en el entorno local.

La recuperación de datos ya funciona a la perfección en un servidor en producción.

Conclusión

La recuperación de datos en Next.js puede parecer un poco diferente si estás acostumbrado a trabajar con aplicaciones tradicionales de React. Dicho esto, es muy fácil de manejar una vez que le coges el truco.

En general, usar la API nativa de fetch dentro de los componentes de servidor te dará el mejor rendimiento. Pero para algunos casos de uso, tendrás que usar SWR para las actualizaciones del lado del cliente, o Axios si es lo que estás acostumbrado a usar.

Una vez que tu aplicación de Next.js esté compilada y recupere datos sin problemas, lo último que querrías es que un servidor lento arruinara todo ese rendimiento. Para evitarlo, cuando estés listo para poner tu aplicación en producción, elige Cloudways Velocity.

Nuestros servidores en la nube dedicados ofrecen recursos informáticos de primer nivel y capas de almacenamiento en caché optimizadas, necesarias para que los componentes de servidor de Next.js y las rutas de la API funcionen a la perfección.

El proyecto completo está disponible en mi GitHub. No dudes en clonarlo y usar el código. Si tienes alguna duda sobre los métodos de obtención de datos o el proceso de implementación, solo tienes que decírmelo en los comentarios.

[email protected]

Abdul es un experto en tecnología, aficionado al café y al marketing creativo al que le encanta estar al día de las últimas actualizaciones de software y aparatos tecnológicos. También es un hábil escritor técnico capaz de explicar conceptos complejos de forma sencilla para un público amplio. Abdul disfruta compartiendo sus conocimientos sobre el sector de la Nube a través de manuales de usuario, documentación y entradas de blog.

Get Connected on: Twitter Community Forum