Guide correct SWR v2 implementation for React and Next.js data fetching.
npx skills add https://github.com/Firzus/agent-skills --skill swr-firzus
Please help me install this Agent Skill. Skill: swr Source: https://github.com/Firzus/agent-skills/tree/main/skills/web/swr Command: npx skills add https://github.com/Firzus/agent-skills --skill swr-firzus
This Skill helps you implement SWR data fetching correctly in React and Next.js so cached data, revalidation, and mutations behave predictably instead of causing stale UI, duplicate requests, or cache mismatches.
useSWR, shared fetchers, loading states, error handling, retry behavior, and global SWRConfig defaults.Ask for help implementing or reviewing your SWR hooks, cache keys, mutations, and Next.js hydration boundaries in the current codebase.
High-intent search queries and answers about installing and using this skill.
Preventing stale UI and duplicate requests in React requires stable SWR cache keys that include filters, auth scope, and locale, ensuring shared fetchers manage cache identity and predictable revalidation across components.
The best way to structure SWR cache keys for dashboard lists is defining stable keys that include every input affecting the response, such as filters, auth scope, locale, or tenant, to keep cached data predictable and prevent mismatches.
Implementing optimistic UI and cache invalidation in SWR involves safely updating cache entries after mutations, applying rollback behavior for failed writes, and triggering cross-component refresh to maintain cache consistency.
SWR v2 works with Next.js App Router by defining client component boundaries correctly to handle server-hydrated views, ensuring cache behavior remains predictable during client-side data fetching and realtime subscriptions.
SWR cache returns mismatched data when cache keys lack the specific filter inputs affecting the response, requiring stable keys that encapsulate every variable like auth scope, locale, and tenant to maintain correct cache identity.
Realtime subscriptions and paginated search results are handled in SWR by setting up infinite lists for pagination and managing live updates, keeping data fresh without breaking cache consistency across filtered views.
PMKhaiMove data fetching and rendering to the server with React Server Components.
DayoptImplements optimistic tRPC mutations with cache snapshotting, rollback on error, and invalidation on settle.
dr-codeGuide Server versus Client Component decisions in Next.js App Router projects.
roderikImplement TanStack Query data fetching and caching in React applications.