Elegir entre TanStack Query y SWR se reduce a una pregunta: ¿cuán complejo va a volverse tu estado del servidor? Ambos obtienen y cachean datos bien, pero apuntan a puntos distintos de la curva de complejidad. Esta guía los compara en caché, mutaciones, paginación, experiencia de desarrollo y encaje en el mundo real para que decidas con confianza.
Veredicto rápido
Si quieres una decisión rápida, sopesa la simplicidad pura frente a la profundidad de funciones y cuánto crecerá tu lógica de escritura y caché.
Elige TanStack Query si
- Necesitas mutaciones de primera clase, actualizaciones optimistas y rollback de serie.
- Tu app hace mucha paginación, scroll infinito o consultas dependientes y paralelas.
- Quieres un control de caché granular, invalidación de consultas y reintentos configurables.
- Te apoyas en las devtools para inspeccionar el estado del caché durante el desarrollo.
Elige SWR si
- Tu capa de datos es mayormente lecturas con escrituras ligeras o simples.
- Quieres la huella más pequeña y la menor configuración.
- Valoras una superficie de API diminuta que un nuevo desarrollador aprende en una tarde.
- Ya estás en el ecosistema de Vercel y Next.js y quieres un encaje natural.
Para equipos más grandes con una lógica de escritura en crecimiento, TanStack Query escala con más gracia porque sus primitivas están construidas para el estado del servidor complejo. Para principiantes, SWR es más suave gracias a su API mínima. Para proyectos centrados en SEO, ninguna librería decide los posicionamientos: tu framework maneja el renderizado del servidor, así que elige según la complejidad de los datos, no según la búsqueda.
TanStack Query vs SWR: diferencias clave
| Criterio | TanStack Query | SWR |
|---|---|---|
| Tipo | Gestor completo de estado del servidor | Hook enfocado de obtención de datos y caché |
| Modelo central | Stale-while-revalidate con rico control de caché | Stale-while-revalidate, intencionadamente mínimo |
| Curva de aprendizaje | Moderada, más conceptos que aprender | Suave, superficie de API muy pequeña |
| Mutaciones | useMutation de primera clase con actualizaciones optimistas y rollback | Posible vía useSWRMutation, menos estructurado |
| Paginación y scroll infinito | Helpers integrados para consultas paginadas e infinitas | Soportado vía useSWRInfinite, más manual |
| Control de caché | Invalidación granular, claves de consulta, prefetching | Revalidación basada en claves, modelo más simple |
| Reintentos y manejo de errores | Reintentos y backoff configurables integrados | Reintento básico, más queda en tus manos |
| Devtools | Devtools dedicadas y maduras | Herramientas más ligeras, menos herramientas dedicadas |
| Tamaño de bundle | Más grande, más funciones incluidas | Más pequeño, núcleo mínimo |
| Soporte de TypeScript | Excelente, APIs fuertemente tipadas | Excelente, genéricos limpios |
| Alcance de frameworks | React más adaptadores de Vue, Svelte, Solid, Angular | Centrado en React, mantenido por Vercel |
| Mejor encaje | Apps complejas con muchas escrituras y caché | Apps con muchas lecturas y necesidades de datos simples |
¿Para qué es mejor TanStack Query?
TanStack Query es lo mejor cuando tu estado del servidor crece más allá de las lecturas simples hacia mutaciones, estrategia de caché y sincronización entre vistas. Trata los datos del servidor como una preocupación de primera clase, con claves de consulta, invalidación, actualizaciones optimistas y prefetching que mantienen coherentes las UIs complejas. Si además estás sopesando la capa de renderizado a su alrededor, nuestra comparativa Next.js vs React aclara dónde encaja la obtención de datos en tu stack.
- Dashboards y apps SaaS con flujos frecuentes de crear, actualizar y eliminar.
- Feeds y tablas que necesitan paginación o scroll infinito.
- Apps con consultas dependientes, paralelas o re-obtenidas en segundo plano.
- Equipos que quieren devtools para depurar el comportamiento del caché.
¿Para qué es mejor SWR?
SWR es lo mejor cuando quieres lecturas rápidas y cacheadas con casi ninguna ceremonia. Su API diminuta revalida en segundo plano, deduplica las peticiones y mantiene la UI fresca sin mucha configuración, lo que lo hace un encaje limpio para interfaces guiadas por contenido. Si además estás comparando el panorama frontend más amplio, nuestra guía React vs Vue encuadra dónde brillan las herramientas ligeras como SWR.
- Dashboards con muchas lecturas y pantallas de perfil o ajustes.
- Sitios de contenido y apps de marketing con poca interactividad.
- Prototipos y MVPs que necesitan obtención de datos rápido.
- Equipos que prefieren una huella de dependencias mínima.
Curva de aprendizaje
SWR es más fácil de aprender primero. Su núcleo es esencialmente un hook, useSWR, con una clave y un fetcher, así que un nuevo desarrollador puede ser productivo en una tarde. TanStack Query te pide entender las claves de consulta, el ciclo de vida del caché, los tiempos de stale y de garbage-collection, las mutaciones y la invalidación, que es más que absorber por adelantado. Ambos tienen una documentación fuerte y bien organizada y un TypeScript limpio. La contrapartida es clara: el modelo mental más pequeño de SWR es más amigable para los principiantes, mientras que los conceptos extra de TanStack Query se amortizan precisamente cuando tu capa de datos se vuelve lo bastante compleja como para necesitarlos.
Rendimiento
En la práctica ambas librerías son rápidas porque comparten la misma idea arquitectónica: stale-while-revalidate, deduplicación de peticiones y un caché que evita llamadas de red redundantes. Renderizan los datos cacheados al instante y los refrescan en segundo plano, lo que mantiene las interfaces receptivas. SWR envía un núcleo más pequeño, así que añade ligeramente menos JavaScript al bundle, lo que puede ayudar en páginas ligeras. TanStack Query carga más código porque hace más, pero sus controles de caché y la re-obtención en segundo plano pueden reducir las peticiones derrochadoras en apps complejas. Los cuellos de botella reales suelen venir de la sobreobtención, las cargas grandes y el renderizado no optimizado en lugar de la elección de la librería, así que configura bien el caché y ambos rinden excelentemente.
SEO
Ni TanStack Query ni SWR mejoran el SEO por sí solos, porque ambos obtienen los datos en el cliente por defecto y la visibilidad en búsquedas depende de cómo se renderiza tu página. Lo que importa para el SEO es el renderizado del servidor, la generación estática, una hidratación limpia y los Core Web Vitals, todo lo cual lo maneja tu framework en lugar del fetcher. Con Next.js puedes renderizar los datos en el servidor e hidratar cualquiera de las librerías en el cliente, y ambas soportan ese patrón. Si el posicionamiento es una prioridad, céntrate en tu estrategia de renderizado y trata la librería de obtención de datos como una preocupación del lado del cliente superpuesta encima.
Experiencia de desarrollo
Ambas ofrecen una fuerte experiencia de desarrollo, pero de formas distintas. SWR se siente sin esfuerzo porque hay tan poco que configurar, la API es diminuta y se integra de forma natural con el ecosistema de Next.js. TanStack Query ofrece una experiencia más rica para apps complejas, con devtools maduras que visualizan el estado del caché, mutaciones estructuradas y convenciones claras que escalan en una gran base de código. Ambas funcionan limpiamente con herramientas de build modernas como Vite para un feedback rápido. La ventaja de SWR es el minimalismo y la incorporación rápida, mientras que la ventaja de TanStack Query es la depurabilidad y la mantenibilidad una vez que tu lógica de estado del servidor crece más allá de las lecturas simples.
Por qué importa esto: el mismo flujo de escritura muestra a TanStack Query entregándote actualizaciones optimistas e invalidación estructuradas, mientras que SWR mantiene la API mínima y te deja a ti esa orquestación.
// TanStack Query: mutacion estructurada con rollback integrado
const mutation = useMutation({
mutationFn: updateTodo,
onMutate: async (next) => {
await queryClient.cancelQueries({ queryKey: ['todos'] });
const prev = queryClient.getQueryData(['todos']);
queryClient.setQueryData(['todos'], next); // optimista
return { prev };
},
onError: (_e, _v, ctx) => queryClient.setQueryData(['todos'], ctx.prev), // rollback
onSettled: () => queryClient.invalidateQueries({ queryKey: ['todos'] }),
});
// SWR: disparador minimo; el estado optimista y el rollback se conectan a mano
const { trigger } = useSWRMutation('/api/todos', updateTodo);Ecosistema y comunidad
TanStack Query tiene una comunidad grande y activa y un amplio ecosistema, incluidos adaptadores para React, Vue, Svelte, Solid y Angular, además de devtools dedicadas y un extenso material de aprendizaje. Se usa ampliamente en producción para aplicaciones complejas y está bien mantenido. SWR está respaldado por Vercel, se integra estrechamente con Next.js y tiene una comunidad saludable centrada en una obtención de datos simple y fiable. Ambos están listos para producción y son estables. Si tus elecciones de stack se extienden a la capa de lenguaje, nuestra comparativa TypeScript vs JavaScript es útil, ya que ambas librerías están en su mejor momento con un tipado fuerte.
Contratación y escalado del equipo
Ambas librerías son fáciles de dotar de personal porque los desarrolladores de React comúnmente conocen una o ambas, y los conceptos se transfieren rápido. SWR es trivial de incorporar, así que cualquier desarrollador de React puede contribuir casi de inmediato, lo que encaja con equipos pequeños y una iteración rápida. TanStack Query tiene una superficie conceptual más grande, pero sus convenciones y devtools hacen que una base de código en crecimiento sea más fácil de mantener entre muchos contribuyentes. Para equipos grandes con estado del servidor complejo, la estructura de TanStack Query reduce la inconsistencia. Para equipos ligeros que valoran la velocidad de incorporación, el minimalismo de SWR es una ventaja.
Mejor opción por caso de uso
| Caso de uso | Mejor opción | Por qué |
|---|---|---|
| Aprendizaje para principiantes | SWR | Una API diminuta y conceptos mínimos hacen la obtención de datos accesible rápido. |
| MVP de startup | SWR | La configuración rápida y la huella ligera ayudan a los equipos pequeños a entregar lecturas rápido. |
| Dashboard empresarial | TanStack Query | Las mutaciones, la paginación y el control de caché manejan bien el estado del servidor complejo. |
| Sitio de contenido para SEO | Cualquiera | Tu framework maneja el renderizado; elige según la complejidad de los datos, no el SEO. |
| Aplicación SaaS | TanStack Query | Las muchas escrituras, las actualizaciones optimistas y la invalidación escalan con el producto. |
| Mantenimiento a largo plazo | TanStack Query | Las devtools y las convenciones claras reducen el riesgo a medida que crece la base de código. |
Notas sobre la migración
Migrar de SWR a TanStack Query, o al revés, suele ser sencillo porque ambos comparten el modelo de stale-while-revalidate y las APIs basadas en hooks. Pasar de SWR a TanStack Query tiene sentido cuando tu capa de datos supera las lecturas simples y empiezas a luchar contra la falta de mutaciones estructuradas, helpers de paginación o invalidación de caché. Moverse en el otro sentido es más raro y solo vale la pena si quieres una huella más pequeña y estás eliminando funciones complejas que ya no usas. Si tu librería actual está cumpliendo tus necesidades, no migres por sí mismo; cambia solo cuando un dolor concreto, no la novedad, impulse la decisión.
Errores comunes
- Elegir solo por el tamaño del bundle: unos pocos kilobytes rara vez importan tanto como lo bien que la librería encaja con tu lógica de escritura y caché.
- Forzar SWR en mutaciones complejas: si luchas contra la API para las actualizaciones optimistas y la invalidación, TanStack Query es la mejor herramienta.
- Ignorar la configuración del caché: los ajustes por defecto de stale y revalidación no siempre son correctos, y ajustarlos previene la sobreobtención.
- Esperar beneficios de SEO: ninguna librería mejora los posicionamientos; apóyate en el renderizado del servidor de tu framework en su lugar.
- Sobreingeniería temprana: adoptar el conjunto completo de funciones de TanStack Query para una pantalla simple de solo lectura añade conceptos que todavía no necesitas.
Recomendación final
Recurre a SWR por defecto cuando tus necesidades de datos tengan muchas lecturas y sean simples, quieras una configuración mínima y una API diminuta importe más que las funciones avanzadas. Elige TanStack Query cuando tu estado del servidor crece hacia mutaciones, paginación, reintentos y un caché serio, donde su estructura y sus devtools claramente se amortizan. Ambos tienen un excelente soporte de TypeScript y ninguno afecta al SEO directamente, así que deja que la complejidad de los datos sea tu factor decisivo. Si aún estás trazando el stack circundante, nuestra comparativa React vs Svelte ayuda a encuadrar dónde encajan estos fetchers.
