Cómo implementamos SWR en un proyecto y por qué nos encantó
Kamil Polok
09 jun 2021・6 min de lectura
¿Por qué SWR?
Recientemente, en SDH tuvimos la oportunidad de desarrollar un proyecto con React y soporte de Redux/Toolkit. El tema es que, aunque los datos se guardaban y se obtenían desde el store, la app no tenía ningún mecanismo de caché implementado. Y mantener decenas de respuestas en el estado no me parece precisamente buena idea. En cualquier caso, pronto se volvió demasiado fácil perderse entre tantos slices de estado, a pesar de usar Toolkit.
Además, en ese momento no tenía ninguna influencia en el backend. Con esos bloques de datos del tamaño de un iceberg flotando por ahí, algunas peticiones tardaban una eternidad en resolverse. Y como la UI de la aplicación consistía en largas listas de ítems con pocas operaciones CRUD, quedó claro que algún tipo de caché vendría de perlas. Así que nos decidimos por SWR, una librería creada por los desarrolladores de Vercel (también conocidos por Next.js).
¿Qué es SWR?
Vale, ¿te gusta leer definiciones? Espero que no, porque esta será de las más cortas que hayas visto. ‘SWR es una librería de React Hooks para obtener datos remotos’. Ya está. ¿Simple? Sí, pero ahora te voy a mostrar que SWR también es muy potente. Y por si te lo preguntabas, SWR significa stale-while-revalidate, lo que ya explica cómo funciona. SWR devuelve datos de la caché (stale), envía una petición para obtener datos actualizados (revalidate) y después devuelve los nuevos datos. Como decía, simple.
Por qué nos encantó SWR
Es fácil ver cómo usar SWR elimina los problemas descritos al principio de este artículo. Gracias a SWR, nosotros:
- Hicimos que la UI funcionara de maravilla (tras las peticiones iniciales) gracias al almacenamiento en caché de datos
- Eliminamos casi todos los slices que contenían datos de la API y su lógica asociada
- Simplificamos el flujo de revalidación de datos tras realizar operaciones CRUD sobre colecciones
- Aceleramos el desarrollo de nuevas funcionalidades dependientes de la API
¿Cómo implementamos realmente esta librería para lograr resultados tan mágicos?
Cómo funciona SWR
Tras poco tiempo trabajando con SWR, quedó claro que es bastante simple y muy amigable de usar. ¿Te apetece hacer una petición a una API con SWR? Mira esto:
La única particularidad es el fetcher. No es más que tu función personalizada para obtener datos. La aplicación en la que trabajamos ya tenía axios configurado y funcionando con toda su configuración (interceptors, headers, base URL, etc.), así que simplemente envolvimos nuestra instancia de axios así para obtener nuestro propio fetcher personalizado:
Por lo tanto, el hook completo podría ser tan simple como esto (omitemos el manejo de errores en este ejemplo):
Y... ¡eso es todo! Hemos creado un hook para obtener datos de la API aprovechando todas las bondades de SWR. Cada vez que se ejecute este hook, primero devolverá los datos obtenidos previamente (si existen) y solo entonces revalidará los datos y devolverá la nueva colección.
SWR viene de serie con un buen puñado de parámetros preconfigurados (todos están listados aquí), que hacen que trabajar con él sea pan comido. Una opción favorita a mencionar es dedupingInterval.
Escenario típico: obtienes datos en un componente, sigues desarrollándolo, los hijos se multiplican sin control y, al final, un hijo de cuarto nivel necesita esos datos. Conseguir llevar esos datos al componente hijo sin demasiado esfuerzo y evitando peticiones repetidas siempre es un reto. Pero no temas: simplemente reutiliza el hook de SWR... El deduping interval no permitirá que se haga la petición de nuevo dentro de un tiempo determinado (2 segundos por defecto). Nada mal.
"Pero si llamo al endpoint y devuelve los mismos datos de antes, mi componente se volverá a renderizar". No: SWR implementa comparación profunda, así que solo se renderizará de nuevo cuando los datos hayan cambiado de verdad. Y la función de comparación puede, por supuesto, personalizarse.
Mutación de datos
Pero quizá digas que hacer un GET siempre es fácil: ¿qué pasa con las mutaciones? Seguro que eso es más complicado. Pues no tanto: las mutaciones no tienen por qué ser una pesadilla, y me sorprendió lo fácil que es mutar datos usando SWR (después de haberme divertido antes con Apollo). Aquí va un ejemplo real:
En este ejemplo, mutate es una función importada de SWR y /users es la clave que le dimos en el hook useUsers (no tiene por qué ser la URL del endpoint: puedes pasar la clave y la URL por separado).
Si quieres almacenar en caché y actualizar una sola entidad (objeto) obtenida de una colección más grande, simplemente muta por su clave así:
¿Parece demasiado simple? Es simple. Pruébalo y puede que te ahorres mucho tiempo escribiendo lógica extensa de Redux y depurando tus llamadas a la API.
Integraciones de SWR
Como ves, implementar SWR es sencillo; con un par de toques, no cuesta llevar los ejemplos anteriores a niveles más altos y abstractos. Obviamente, SWR no se limita a esto y hay un buen número de opciones e integraciones disponibles:
integración con GraphQL
manejo de errores con opciones de reintento
revalidación automática
soporte de paginación (también para carga infinita)
prefetching de datos
y muchas más (documentación)
Trabajar con SWR nos pareció súper interesante y sin duda lo consideraremos para futuros proyectos. Si quieres saber más sobre esta fantástica librería, visita su sitio oficial con documentación, configuraciones y ejemplos aquí.
¡Feliz programación!
Digital Transformation Strategy for Siemens Finance
Cloud-based platform for Siemens Financial Services in Poland
También te puede gustar...
Cómo generar un PDF desde HTML en una aplicación React/Node.js
Generar archivos PDF desde HTML puede resultar complicado, pero con los métodos adecuados puedes conseguir el resultado que buscas. Explora distintas soluciones, desde las reglas de impresión de CSS hasta bibliotecas como html2canvas, jsPDF y Puppeteer. Comprende las ventajas y desventajas de cada enfoque para encontrar la mejor solución para tu proyecto. Contáctanos en hello@start-up.house para más información y asistencia. ¡Éxitos en tus proyectos de generación de PDF!
Eugene Zolotarenko
20 may 2021・6 min de lectura
4 razones para usar Chakra UI en tu próximo proyecto
Chakra UI es una biblioteca de componentes sencilla, modular y accesible para crear aplicaciones con React rápidamente. Gracias a su fácil personalización, soporte para modo oscuro, capacidades de diseño responsive y enfoque en la accesibilidad, Chakra UI destaca entre otras bibliotecas de UI, lo que la convierte en una excelente opción para desarrolladores de React.
Mateusz Wójcik
19 ene 2021・4 min de lectura
¿Cuál es la diferencia entre las metodologías Agile y Waterfall?
¿Aún no sabes si te conviene adoptar un enfoque ágil (Agile) o en cascada (Waterfall) para tu proyecto de desarrollo de software? Como desarrolladores con experiencia, conocemos bien esa duda y la escuchamos aún más cuando un emprendedor pregunta: «¿Qué metodología de gestión de proyectos es la mejor para mis procesos de desarrollo de software?». Para resolverlo, empecemos por lo básico: «¿Cuál es la diferencia entre las metodologías ágiles y en cascada (Waterfall)?». Muchas, en realidad. Así que vamos a repasar y actualizar estos enfoques —ágil y en cascada— para ayudarte a maximizar tus recursos y a que tus proyectos se ejecuten con la mayor fluidez y éxito posibles.
David Adamick
05 may 2023・7 min de lectura
Casos de uso de agentes de IA en 2026
Los agentes de IA ya no son una demostración de investigación: ahora leen el historial de clientes en sistemas CRM reales, monitorean miles de transacciones por segundo para detectar fraude, generan pull requests contra bases de código de producción y reoptimizan flotas logísticas sin intervención humana. El paso de chatbots reactivos a agentes autónomos capaces de usar herramientas y ejecutar tareas de múltiples pasos es la razón por la que 2024–2026 marca el punto de inflexión para la adopción empresarial. Esta guía desglosa casos de uso concretos de agentes de IA en atención al cliente, ventas y marketing, ingeniería de software, finanzas, logística, salud, RR. HH. y retail, además de las decisiones de arquitectura, prácticas de gobernanza y consejos de implementación que separan a los agentes listos para producción de los prototipos ingeniosos.
Alexander Stasiak
29 abr 2026・11 min de lectura
Seguridad en DevOps 2026
Cómo integrar la seguridad en cada etapa del CI/CD con SAST, DAST, SCA y una cultura de DevSecOps — para desplegar más rápido y de forma segura.
Alexander Stasiak
21 jun 2026・10 min de lectura
Herramientas modernas de documentación técnica (Guía 2026)
Los PDF estáticos que se comparten por correo electrónico no pueden seguir el ritmo de los ciclos de lanzamiento semanales ni de las crecientes expectativas de los usuarios. En 2026, los mejores equipos de software tratan la documentación como un producto vivo: versionada, colaborativa, potenciada con IA y profundamente integrada en sus flujos de trabajo de desarrollo. Esta guía desglosa todas las categorías clave de las herramientas modernas de documentación técnica, analiza las plataformas líderes y te ofrece un marco práctico para elegir el stack adecuado según el tamaño de tu equipo, su madurez técnica y sus objetivos de documentación.
Alexander Stasiak
01 mar 2026・18 min de lectura
Añadido recientemente
Cómo Startup House redujo a 2 minutos el proceso de solicitud de leasing para Siemens Financial Services
Antes, el leasing significaba papeleo, verificaciones de crédito manuales y decisiones que solo llegaban en horario de oficina. Para Siemens Financial Services Poland, Startup House lo sustituyó por SimplyLease Online: un proceso de solicitud que los clientes completan en unos 2 minutos y una decisión de crédito automatizada que llega en aproximadamente 7 minutos, a cualquier hora. Este estudio de caso muestra cómo se construyó la plataforma cumpliendo los estándares de seguridad de Siemens Group, cómo se integra con los sistemas de Siemens y con proveedores externos de datos, y qué ha aportado una colaboración en marcha desde 2016. Cierra con tres lecciones aplicables a casi cualquier producto de financiación o crédito.
Alexander Stasiak
06 oct 2026・5 min de lectura
Proyectos de IA y digitales de Startup House: 5 resultados medibles en cifras
Afirmar es fácil en el desarrollo de software; por eso este artículo se ciñe a los números. Repasa cinco resultados de proyectos de clientes de Startup House, desde un recorte del 95% en el tiempo de incorporación con un agente de IA integrado hasta una reducción del 40% en los costes de desarrollo para Omnipack. Cada sección explica qué tipo de trabajo produjo la cifra y enlaza al estudio de caso público correspondiente. La sección final identifica tres patrones comunes entre estos proyectos, útiles para aplicar trabajes o no con nosotros.
Alexander Stasiak
04 oct 2026・5 min de lectura
Desarrollo de software Healthtech en Startup House: proyectos y resultados con el cumplimiento normativo como prioridad
En el software sanitario, el cumplimiento normativo es o bien una decisión de arquitectura o una adaptación a posteriori. Este artículo muestra cómo se diseña desde el día uno a través de tres proyectos de Startup House: una plataforma de ventas para Siemens Healthineers, activa en más de 60 países; un MVP de atención a la demencia moldeado por 7 sesiones de pruebas con pacientes y cuidadores; y Doogie, una demostración de IA con nivel HIPAA desarrollada en dos meses. También explica cómo RAG mantiene las respuestas de IA clínica trazables a fuentes verificadas y por qué los datos de pacientes nunca se utilizan para entrenar modelos. Para empresas MedTech y plataformas SaaS de salud, es una mirada práctica a lo que significa la ingeniería con enfoque de cumplimiento normativo desde el inicio, más allá del término.
Marek Pałys
03 oct 2026・5 min de lectura
Desarrollo de EdTech en Startup House: lo que hemos construido y lo que eso cambió
Las plataformas EdTech fracasan más por cuestiones de UX que por problemas técnicos: los estudiantes abandonan, el contenido no escala y el ROI sigue siendo invisible. Este artículo muestra cómo Startup House evita eso con una entrega por fases y pruebas con usuarios reales, usando dos proyectos como prueba. Graspify pasó de una idea ambiciosa a una plataforma de microlearning que formó a cientos de empleados durante un evento corporativo, y LITTLEWINE obtuvo un alcance de proyecto listo para presentar a inversores a partir de 10 entrevistas con usuarios en 2 semanas. También aborda herramientas de aprendizaje con IA que responden únicamente a partir de contenido aprobado y pueden salir a producción en tan solo 2 semanas.
Alexander Stasiak
02 oct 2026・5 min de lectura
IA en fintech: proyectos, aprendizajes y resultados de Startup House
Los clientes de fintech esperan una velocidad al nivel de las apps de consumo, mientras que los reguladores exigen un control a nivel bancario. Este artículo muestra cómo Startup House ha gestionado esa tensión en tres proyectos: decisiones de crédito automatizadas 24/7 para Siemens Financial Services, una plataforma de riesgo cibernético que aumentó los ingresos un 150 % en un año y un equipo de fintech climática para CHOOOSE formado en 2 semanas. Cada proyecto viene acompañado de la lección que nos dejó. El artículo termina con cinco reglas para la IA en finanzas, desde basar cada respuesta en datos verificados hasta diseñar el aislamiento de tenants en la arquitectura.
Marek Pałys
01 oct 2026・5 min de lectura
Agentes de IA para documentación clínica y gestión administrativa sanitaria
Cómo los agentes de IA ambiental redactan notas clínicas, asignan códigos de facturación y gestionan la autorización previa — y devuelven a los profesionales de la salud las horas que la historia clínica electrónica (EHR) les quita.
Alexander Stasiak
30 sept 2026・11 min de lectura
¿Listo para centralizar tu know-how con IA?
Empieza un nuevo capítulo en la gestión del conocimiento, donde el Asistente de IA se convierte en el pilar central de tu experiencia de soporte digital.
Trabaja con un equipo de confianza para empresas líderes.
