SWR frente a React Query: elegir la herramienta adecuada

SWR ocupa aproximadamente 7 kb comprimido con gzip. React Query v5 ocupa aproximadamente 13 kb comprimido con gzip. La diferencia de tamaño refleja las funciones adicionales de React Query: precarga de consultas, cancelación de consultas, un ciclo de vida de las consultas más detallado y DevTools integradas.

Para aplicaciones en las que el tamaño es importante o para patrones sencillos de obtención y visualización, la menor huella de SWR supone una ventaja significativa.

SWR tiene una API más sencilla y minimalista. Si su necesidad principal es obtener datos y mostrarlos con revalidación automática, SWR cubre este caso de forma elegante y con muy poco código repetitivo.

Al estar desarrollado por Vercel, SWR se integra especialmente bien con Next.js, sobre todo para combinar la precarga mediante getServerSideProps o getStaticProps con la revalidación en el cliente mediante datos de fallback.

Pase los datos precargados a SWR mediante la opción fallback de SWRConfig o la opción fallbackData de useSWR. SWR utiliza estos datos como valor inicial de la caché, lo que elimina el parpadeo de la primera carga y permite la revalidación en segundo plano.

Este patrón es el enfoque recomendado para obtener datos en aplicaciones de Next.js que utilizan Pages Router con Vercel.

React Query ofrece un control más preciso del ciclo de vida de las consultas: staleTime, gcTime (recolección de basura), refetchOnWindowFocus, el número de reintentos y el retraso entre reintentos se pueden configurar individualmente. Su sistema de mutaciones, con las funciones de devolución de llamada onSuccess, onError y onSettled, es muy expresivo.

React Query también permite cancelar consultas mediante AbortSignal, algo útil en interfaces de búsqueda mientras se escribe.

useInfiniteQuery de React Query, junto con getNextPageParam, está diseñado específicamente para los patrones de desplazamiento infinito y carga progresiva. Gestiona la lógica del cursor de página y proporciona un objeto pages plano o estructurado.

SWR dispone de useSWRInfinite, que cubre un ámbito similar, pero ofrece una API ligeramente más cercana al nivel inferior y requiere ensamblar más páginas manualmente.

React Query permite precargar consultas al pasar el cursor sobre un elemento o al cambiar de ruta mediante queryClient.prefetchQuery. Los datos están en la caché antes de que se monte el componente, lo que proporciona una renderización instantánea.

SWR no dispone de una API de precarga integrada más allá de los datos de fallback del SSR. Para la precarga al pasar el cursor, React Query es la mejor opción.

React Query v5 simplificó la API haciendo que useQuery devuelva isPending en lugar de isLoading, unificando los patrones de actualización optimista y mejorando la inferencia de TypeScript. La API de v5 es más limpia y coherente que las versiones anteriores.

Si está evaluando React Query, diríjase directamente a v5 en lugar de aprender v4 para después migrar.

SWR comparte globalmente las entradas de la caché entre componentes mediante la clave, sin ninguna configuración de proveedores más allá de SWRConfig para los valores predeterminados. React Query requiere QueryClientProvider con una instancia de QueryClient.

Para crear prototipos rápidamente o para aplicaciones sencillas, la caché global de SWR sin configuración es más rápida de preparar. El cliente explícito de React Query es mejor para aplicaciones grandes con requisitos complejos de almacenamiento en caché.

Elija SWR cuando su aplicación se base principalmente en Next.js, los patrones de obtención de datos sean sencillos (obtener-mostrar-revalidar), quiera un tamaño de paquete mínimo o su equipo valore la simplicidad de la API por encima de las funciones avanzadas.

SWR también es una excelente opción cuando se incorpora gradualmente una biblioteca de obtención de datos a un código existente sin realizar una migración importante.

Elija React Query cuando necesite una gestión compleja del estado del servidor: desplazamiento infinito, precarga de consultas, estrategias de actualización en segundo plano, dependencias entre consultas de varios pasos o un control preciso del TTL de la caché.

React Query también cuenta con un ecosistema más activo de middleware y DevTools, y su queryClient se puede probar con mayor facilidad de forma aislada.

Algunos equipos utilizan ambas bibliotecas: SWR para obtener recursos individuales sencillos en componentes hoja y React Query para páginas complejas con varias consultas y precarga. No es habitual, pero es válido si el equipo domina ambas API.

Lo más común es que los equipos elijan una sola y la apliquen de forma coherente en toda la aplicación para evitar cambiar de contexto y asumir la sobrecarga de dos dependencias.

¿Cómo se comparan aproximadamente los tamaños de los paquetes de SWR y React Query?

SWR (~7 kb) es más sencillo, se integra de forma nativa con Next.js y cubre la mayoría de los patrones de obtención y visualización con un código mínimo. React Query (~13 kb) ofrece funciones más completas: consultas infinitas, precarga, funciones de devolución de llamada precisas para el ciclo de vida y cancelación de consultas.

Elija SWR para proyectos que prioricen la simplicidad y Next.js; elija React Query para requisitos complejos de estado del servidor. Ambas bibliotecas admiten TypeScript, Suspense, SSR y patrones sin conexión.