SWR Config Generator

SWR (stale-while-revalidate) is a React data-fetching library by Vercel. The name comes from the HTTP cache control strategy: serve stale data immediately while revalidating in the background. This gives users instant UI updates while keeping data fresh. SWR is lightweight, framework-agnostic (works with REST, GraphQL, any async source), and built for React.

dedupingInterval prevents duplicate requests to the same key within the specified time window (default: 2 seconds). If multiple components call useSWR with the same key, only one network request fires. Subsequent calls use the in-flight request's result. Increase this for expensive endpoints, decrease for data that must always be fresh.

When revalidateOnFocus is true (default), SWR re-fetches data whenever the browser tab regains focus. This is great for dashboards or collaborative apps where data may have changed while the user was away. Set it to false for data that's expensive to fetch or doesn't change often (e.g., user profile, static config).

Both are data-fetching libraries with similar features. SWR is lighter (~4KB) and simpler — great for straightforward data fetching in Next.js apps. React Query (TanStack Query) is more feature-rich: better mutation handling, query invalidation patterns, pagination utilities, and offline support. For most Next.js apps, SWR is sufficient; for complex server state management, React Query wins.

Any two components using useSWR with the same key string automatically share the cache. No context provider is needed — SWR handles this globally. You can configure global defaults with SWRConfig at your app root. Use the useSWRConfig hook inside components to access the mutate function for manual cache updates.

Optimistic UI updates the local cache immediately before the server confirms the change. With SWR's mutate, you can update the cache optimistically and then revert on error: await mutate(key, optimisticData, { optimisticData, rollbackOnError: true, populateCache: true, revalidate: false }). This makes mutations feel instant to users.