Next.jsReactTanStack QueryTypeScriptJul 2025 · 5 min read
Hydrating Next.js 15 Server Components with TanStack Query
A clean guide to prefetching data on the server, streaming via React Suspense, and client-side optimistic UI mutations.
Next.js App Router server components can fetch data directly, but combining them with TanStack Query unlocks instant client cache hydration, automatic background refetching, and optimistic updates.
1. Server Prefetch & HydrationBoundary Pattern
Create a QueryClient on the server, prefetch queries inside your Server Component, and dehydrate the cache into the client-side HydrationBoundary.