Next.js · Middle · Frage 34 von 75
Wie lädt man im App Router Daten für Client Components mit TanStack Query vorab?
- 1
prefetchQueryauf dem Server undHydrationBoundary - 2
useQuerydirekt in einer async Server Component aufrufen - 3Die Instanz von
QueryClientin den Exportmetadatader Seite legen
Antwort zeigen
Richtige Antwort: prefetchQuery auf dem Server und HydrationBoundary
Erklärung
Eine Server Component erzeugt einen QueryClient, führt prefetchQuery aus und übergibt den Cache-Zustand über <HydrationBoundary state={dehydrate(qc)}>. Ein useQuery mit demselben Schlüssel auf dem Client bekommt die Daten sofort. Hooks funktionieren in Server Components nicht.