Client Data Fetching provides structured patterns and best practices for integrating TanStack Query v5 into Next.js App Router projects. It guides developers on optimal QueryClient provider placement across server and client boundaries, implementing dehydrated state prefetching in React Server Components (RSC) with HydrationBoundary, and fine-tuning staleTime and gcTime defaults for dashboards versus public pages. By enforcing consistent query key management, secure mutation handling with targeted invalidation, and prevention of double fetches, this skill ensures robust client-side state synchronization without fighting the Next.js App Router.
주요 기능
01Configures QueryClient provider boundaries cleanly across Next.js layout and client components
02Establishes stable, serializable query key conventions with dynamic filter and locale support
03Tunes staleTime and gcTime cache defaults tailored for dashboard versus public-facing views
04Enforces safe mutation workflows with selective cache invalidation and optimistic update rollbacks
050 GitHub stars
06Implements RSC initial data prefetching with dehydrate and HydrationBoundary to eliminate double fetching
사용 사례
01Hydrating server-rendered Next.js pages with TanStack Query v5 without duplicating network requests on the client
02Optimizing dashboard cache policies and window focus refetching behaviors to prevent API request storms
03Setting up modular client query providers and structured mutation invalidation routines across complex React applications