Next.js · Middle · Question 34 of 75

How do you prefetch data for client components using TanStack Query in the App Router?

Explanation

A server component creates a QueryClient, runs prefetchQuery and passes the cache state via <HydrationBoundary state={dehydrate(qc)}>. A client useQuery with the same key gets the data immediately. Hooks don't work in server components.

Further reading

Problem with a question

Next.js · Middle · question 34

Test yourself

Take the Next.js · Middle quiz: questions and options are shuffled, and you get a review of your mistakes at the end.

Take this quiz