Client-side data fetching with TanStack Query

Render loading UI in the query component, reveal results with Suspense, or provide initial query data from a Server Component.

Client-only queries

These searches start after interaction without server-provided data. One renders its loading state inline. The other uses a local Suspense boundary to coordinate when results are revealed.

Initial data from the server

The server read and its hydration timestamp share a tag, while React Query independently owns browser freshness and refetching.

Route-scoped data

Coordinating the server and client caches

The tagged server read provides the initial query data. The mutation updates the badge optimistically, while the Server Action updates the tag so the next server read sees the change.