SWR

El nombre “SWR” es derivado de stale-while-revalidate, una estrategia de invalidación de caché HTTP popularizada por HTTP RFC 5861 (opens in a new tab). SWR es una estrategia para devolver primero los datos en caché (obsoletos), luego envíe la solicitud de recuperación (revalidación), y finalmente entrege los datos actualizados.

Resumen

import useSWR from 'swr'
 
function Profile() {
   const { data, error, isLoading } = useSWR('/api/user', fetcher)
 
   if (error) return <div>failed to load</div>
   if (isLoading) return <div>loading...</div>
   return <div>hello {data.name}!</div>
}

En este ejemplo, el hook useSWR acepta una key que es un cadena y una función fetcher. key es un indentificador único de los datos (normalmente la URL de la API) y pasará al fetcher. El fetcher puede ser cualquier función asíncrona que devuelve datos, puedes utilizar el fetch nativo o herramientas como Axios.

El hook devuelve 2 valores: data y error, basados en el estado de la solicitud.

Características

Con una sola línea de código, puede simplificar la obtención de datos en su proyecto, y tambien tiene todas estas increíbles características fuera de caja:

• Obtención de datos rápida, ligera y reutilizable
• Caché integrada y deduplicación de solicitudes
• Experiencia en tiempo real
• Agnóstico al transporte y al protocolo
• SSR / ISR / SSG support
• TypeScript ready
• React Native

SWR le cubre en todos los aspectos de velocidad, correción, y estabilidad para ayudarle a construir mejores experiencias:

• Navegación rápida por la página
• Polling on interval
• Dependencia de los datos
• Revalidation on focus
• Revalidation on network recovery
• Mutación local (Optimistic UI)
• Smart error retry
• Pagination and scroll position recovery
• React Suspense

And lot more.

Comunidad

SWR es creado por el mismo equipo que esta detrás de Next.js (opens in a new tab), el framework de React. Sigan @vercel (opens in a new tab) en Twitter para futuras actualizaciones del proyecto.

Sientase libre de unirse a discusiones en GitHub (opens in a new tab)!