vercel/swr
Swr
SWR is a data fetching library that provides a collection of hooks for managing remote data synchronization, caching, and state updates in web applications. It employs a declarative approach to handle complex network request lifecycles and dependency chains, ensuring that client-side application state remains consistent with server data through automatic revalidation and background updates.
The library distinguishes itself through a reactive cache layer that automatically synchronizes local state with remote sources based on component lifecycle events. It features event-driven revalidation, which triggers background refreshes in response to browser-level changes like window focus or network reconnection. To enhance user experience, it supports optimistic cache mutation, allowing the interface to update immediately while performing background network requests, with built-in rollback capabilities if a mutation fails.
Beyond core fetching, the library offers a comprehensive suite of tools for managing paginated data streams, real-time subscriptions, and request retry logic. It includes robust support for server-side integration, enabling data pre-rendering and hydration to ensure fast initial page loads. The architecture is highly extensible, allowing developers to intercept and modify the request lifecycle through middleware composition and custom cache providers.
The library is built with TypeScript, providing full type safety for hooks, configuration objects, and middleware definitions. It is designed to be installed as a dependency in modern web projects, offering a centralized configuration context that propagates settings and cache instances throughout the component tree.
Features
- Data Fetching Libraries - Provides declarative hooks to manage network request lifecycles and simplify state handling.
- Data Fetching State Management - Propagates global configuration and cache instances through the component tree for centralized data management.
- Server-Side Data Prefetching - Loads data on the server before sending pages to the browser to ensure users see complete content immediately.
- State Synchronization Tools - Keeps client-side application state in sync with server data through automatic revalidation and caching.
- Optimistic UI Updates - Updates the local data store immediately to provide instant UI feedback with automatic rollback on failure.
- Server-Side Suspense Configurations - Provides initial data via fallback options during server-side rendering to ensure components have necessary information.
- Suspense Integrations - Guarantees that fetched data is available immediately upon component render to simplify data handling.
- Reactive Cache Layers - Provides a persistent storage mechanism that automatically synchronizes local state with remote server data.
- Real-time Data Subscriptions - Connects to real-time data sources to update component state automatically when new events arrive.
- Data Synchronization Strategies - Triggers background data refreshes based on browser events to maintain synchronization with server state.
- Infinite Data Fetching - Retrieves multiple pages of data sequentially or in parallel to support infinite-scroll interfaces.
- Optimistic UI Patterns - Updates the user interface immediately after actions to ensure a responsive and fluid experience.
- Suspense Integration - Coordinates with the rendering engine to pause component execution until data is available.
- API Clients and Utilities - React hooks for remote data fetching.
- State Management - Hooks for data fetching and caching.
- API Clients - React hooks for remote data fetching.
- React Ecosystem - Hooks-based library for data fetching and remote state synchronization.
- State Management - React hooks for efficient data fetching.
- Optimistic Update Management - Updates the local cache immediately before a remote mutation finishes with automatic rollback capabilities.
- Cache Pre-filling - Injects initial data into the cache to provide immediate values to hooks before the first network request completes.
- Custom Fetchers - Supports creating custom data retrieval functions using standard HTTP clients.
- Dependent Data Fetching - Requests data that relies on previous results by using a function as the key.
- Global Configuration - Enables defining data fetching options globally or within nested contexts.
- Programmatic Prefetching - Triggers data fetching using a dedicated API to populate the cache before components render.
- Request Deduplication - Collapses multiple concurrent requests for the same resource into a single network call using unique keys.
- Server-Side Hydration Utilities - Generates server-rendered pages with initial data so client-side components can hydrate immediately.
- Cache Mutation Utilities - Updates local cache data and triggers revalidation for specific keys using bound mutator functions.
- Remote Mutation Execution - Executes manual remote mutations using dedicated hooks that manage their own state.
- Cache Providers - Allows specifying a custom storage mechanism for cached data via provider functions.
- Conditional Data Fetching - Prevents requests from starting by passing null or falsy values as the key.
- Dependency Tracking - Maps complex objects to stable identifiers to detect data changes and trigger re-fetches.
- Resource Preloading - Initiates network requests using native browser link tags to populate the cache before JavaScript execution begins.
- Type System Tools - Infers data, error, and key types automatically from fetcher functions to ensure type safety.
- API Testing - Provides configurable automatic request retries using exponential backoff.
- Data Fetching Configuration - Configures how data loads in server components by using serialization utilities and providers.
- Focus-Based Revalidation - Refreshes data automatically when the user returns to the browser tab.
- Global State Access - Provides a dedicated hook to retrieve the current global configuration and cache instance.
- Middleware Hook Composition - Wraps data fetching lifecycles in function chains to intercept and modify requests.
- Pagination Utilities - Manages paginated data streams to build seamless content feeds that grow as users navigate.
- Polling Strategies - Fetches fresh data at set time intervals while the component remains visible.
- Reconnect-Based Revalidation - Triggers an automatic data refresh when the device regains network connectivity.
