Prefetching és hydration

Prefetching és hydration

prefetchQuery

Adat előtöltése (pl. link hoverre, route előtt):

const queryClient = useQueryClient()
await queryClient.prefetchQuery({ queryKey: ['user', userId], queryFn: () => fetchUser(userId) })

SSR / Next.js

Szerveren prefetch, majd kliensen hydration:

1. Szerveren: prefetchQuery + dehydrate(queryClient).
2. A dehydrált state-et átadod a kliensnek (pl. props).
3. Kliensen: <HydrationBoundary state={dehydratedState}> a QueryClientProvider alatt.
4. A gyerek komponensekben a szokásos useQuery ugyanazzal a key-el már a cache-ből kapja az adatot.

📝 Összefoglaló

• prefetchQuery = előre betöltés (navigáció, hover).
• SSR: prefetch → dehydrate → HydrationBoundary → useQuery ugyanazzal a key-el.