INTRO
Server Components can fetch on the server cheaply. Client components need caching, deduping, and background refetch - that is where TanStack Query shines. Mixing them blindly creates double fetches and stale UI unless you draw a line.
Decide where the first fetch runs
For SEO-critical or static-friendly data, fetch in a Server Component and pass props to a client child. Hydrate QueryClient with `dehydrate`/`HydrationBoundary` if the client subtree must reuse the same cache.
For highly interactive dashboards behind auth, client-first fetching is often simpler than threading every update through server actions.
code-snippet.tsx
export const orderKeys = {
all: ['orders'] as const,
list: (filters: OrderFilters) => [...orderKeys.all, 'list', filters] as const,
detail: (id: string) => [...orderKeys.all, 'detail', id] as const,
}Mutations and cache updates
After `useMutation`, invalidate list keys or update cache optimistically with rollback on error. Pick one style per resource so the team stays consistent.
`staleTime` defaults matter: dashboards may tolerate 30s; checkout flows may need `staleTime: 0` and explicit invalidation.
Errors and loading UX
Surface `isError` with retry; pair with toast only for mutations, not for every background refetch failure.
Skeletons that mirror layout beat spinners that shift content.
KEY TAKEAWAYS
“Use RSC for first paint; use Query for client interactivity and cache.”
- 02
Centralize query keys; invalidate deliberately after mutations.
- 03
Tune `staleTime` per domain - dashboard vs transactional flows differ.
CONCLUSION
Closing thought
TanStack Query and App Router complement each other when you choose the first source of truth per screen. Document that choice per route and avoid accidental double fetching. Ready to talk scope? Use Contact — or browse Services for fit.
CONTINUE
Related pages
UP NEXT
Next.js Server Actions vs Route Handlers
When I reach for Server Actions, when I keep a Route Handler, and how I avoid coupling security-sensitive flows to the wrong abstraction.
Read next article