SWR

Instala SWR, envuelve tu app con SWRConfig y define valores predeterminados globales para que cada llamada a useSWR herede un fetcher compartido y opciones comunes.

Usa el hook useSWR con una clave y una función fetcher para obtener, cachear y revalidar datos remotos de forma declarativa en componentes React.

Pasa null o un valor falsy como clave para evitar que SWR haga fetch. Úsalo para esperar dependencias, restringir solicitudes tras la autenticación o encadenar fetches secuenciales

Usa useSWRMutation para mutaciones remotas (POST, PUT, DELETE) y mutate para actualizaciones locales de caché. Combina ambos para patrones de UI optimista que se actualizan al instante y se reconcilian con el servidor.

Usa useSWRInfinite para gestionar datos paginados y de scroll infinito. Define una función getKey que devuelva la URL correcta para cada índice de página, y llama a setSize para

SWR ofrece múltiples estrategias de revalidación: al enfocar la ventana, por intervalo, al reconectar y manual. Configúralas de forma global o por hook para mantener los datos actualizados sin hacer over-fetching.

SWR usa una caché en memoria por defecto. Personaliza el proveedor de caché para almacenamiento persistente, diseña tu estrategia de claves para maximizar los aciertos de caché y aprovecha la deduplicación.

SWR captura los errores lanzados por tu fetcher y los expone mediante el valor de retorno error. Configura reintentos automáticos, callbacks de error e integra con React Er

Habilita la opción suspense en useSWR para integrarlo con los límites de React Suspense. Cuando suspense está activo, SWR lanza una promesa durante la carga, permitiendo que <Suspense> gestione la interfaz de respaldo.

Tipa tus llamadas a useSWR con genéricos para obtener seguridad de tipos completa en data, error, claves y funciones fetcher. El soporte de TypeScript de SWR permite inferir tipos de retorno

Obtén datos en un Server Component y pásalos a un Client Component como datos de fallback para SWR. Así obtienes contenido renderizado en el servidor al instante con revalidación en el cliente.

El middleware de SWR envuelve cada llamada a useSWR, permitiéndote inyectar preocupaciones transversales como logging, cabeceras de autenticación, tiempo de petición o transformación de datos sin modificar hooks individuales.