Consumo de APIs en Next.js con ReactQuery y useEffect

Crear una aplicación robusta con Next.js implica abordar los desafíos de la gestión de datos tanto en el servidor como en el cliente. Aunque los métodos básicos como useState y useEffect son útiles, librerías avanzadas como React Query simplifican enormemente el manejo de estados asíncronos y optimizan la experiencia de desarrollo.

¿Por qué es necesario consumir datos desde el cliente?

• Las aplicaciones modernas requieren datos dinámicos que no siempre están disponibles en el servidor.
• Por razones de seguridad u operativas, muchas veces el cliente no puede acceder directamente a bases de datos o servicios.
• Next.js y React permiten manejar este tipo de escenarios con componentes específicos y librerías dedicadas.

¿Cómo consumir datos en el cliente usando React?

Método básico con useState y useEffect

1. Inicializar el estado:

   • Utiliza useState para almacenar los datos.
   • Define un estado inicial vacío para manejar la información recibida.

2. Efectos para realizar el fetch:

   • Usa useEffect para ejecutar código asíncrono al montar el componente.
   • Realiza la petición al servidor, procesa la respuesta y actualiza el estado.

3. Manejo de estados asíncronos:

   • Implementa un sistema de estados (loading, error, success) para gestionar la carga y posibles errores.

Ejemplo de uso:

const [bookmarks, setBookmarks] = useState([]);
const [status, setStatus] = useState('idle');

useEffect(() => {
  setStatus('loading');
  fetch('/api/bookmarks')
    .then((response) => response.json())
    .then((data) => {
      setBookmarks(data);
      setStatus('success');
    })
    .catch(() => setStatus('error'));
}, []);

¿Cómo optimizarlo con React Query?

1. Configura React Query:

   • Instala TanStack React Query si no está configurado previamente.
   • Importa y utiliza el hook useQuery.

2. Define el queryKey y la función fetch:

   • El queryKey identifica la consulta y gestiona el caché.
   • La función de fetch se integra directamente en React Query.

3. Beneficios adicionales:

   • Control automático de estados (isLoading, isError, isSuccess).
   • Caché integrado para optimizar peticiones repetidas.
   • Manejo seguro de datos y mutaciones.

Ejemplo con React Query:

import { useQuery } from '@tanstack/react-query';

const fetchBookmarks = async () => {
  const response = await fetch('/api/bookmarks');
  return response.json();
};

const { data: bookmarks, status } = useQuery(['bookmarks'], fetchBookmarks);

¿Qué alternativas existen a React Query?

• SWR: Librería desarrollada por el equipo de Vercel. Similar a React Query, se enfoca en traer datos de forma eficiente y con soporte de caché.
• Ambas herramientas son excelentes para manejar estados asíncronos y puedes elegir según las necesidades del proyecto.

¿Qué buenas prácticas aplicar al consumir datos?

• Usar librerías avanzadas: Reducen la complejidad y evitan errores comunes.
• Configurar correctamente el caché: Mejora el rendimiento y reduce el tiempo de espera en el cliente.
• Evitar duplicación de lógica: Centraliza las operaciones de fetch para facilitar el mantenimiento.