swr
v2.3.0
SWR es una biblioteca React Hooks para obtener datos.
El nombre " SWR " se deriva de stale-while-revalidate , una estrategia de invalidación de caché popularizada por HTTP RFC 5861. SWR devuelve primero los datos de Cache (rancio), luego envía la solicitud (Revalidato), y finalmente viene con los datos actualizados nuevamente.
Con solo un gancho, puede simplificar significativamente la lógica de obtención de datos en su proyecto. Y también cubrió todos los aspectos de la velocidad, la corrección y la estabilidad para ayudarlo a construir mejores experiencias:
... y mucho más.
Con SWR, los componentes obtendrán un flujo de actualizaciones de datos constante y automáticamente . Por lo tanto, la UI siempre será rápida y reactiva .
Ver documentación completa y ejemplos en SWR.vercel.App.
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 React Hooks useSWR acepta una key y una función fetcher . La key es un identificador único de la solicitud, normalmente la URL de la API. Y el fetcher acepta key como su parámetro y devuelve los datos de forma asincrónica.
useSWR también devuelve 3 valores: data , isLoading y error . Cuando la solicitud (Fetcher) aún no haya terminado, data estarán undefined y isLoading será true . Cuando obtenemos una respuesta, establece data y error en función del resultado de fetcher , isLoading a False y vuelve a ser el componente.
Tenga en cuenta que fetcher puede ser cualquier función asincrónica, puede usar su biblioteca de recolección de datos favorita para manejar esa parte.
Ver documentación completa y ejemplos en SWR.vercel.App.
Esta biblioteca es creada por el equipo detrás de Next.js, con contribuciones de nuestra comunidad:
Colaboradores
¡Gracias a Ryan Chen por proporcionar el impresionante nombre del paquete swr NPM!
La licencia del MIT.
