Prefetching trong React Query hoạt động như thế nào?

Prefetch on hover (client) hoặc trong Server Component (server) để data sẵn sàng trước khi user cần — loại bỏ loading state hoàn toàn.

• Prefetching là kỹ thuật fetch data trước khi user cần, giúp loại bỏ loading state.
• Client-side pattern: prefetch on hover để khi user click vào link thì data đã sẵn sàng — const handleMouseEnter = () => queryClient.prefetchQuery({ queryKey: ['post', id], queryFn: () => fetchPost(id), staleTime: 30_000 }).
• Server-side với Next.js App Router: const queryClient = new QueryClient(); await queryClient.prefetchQuery({ queryKey: ['posts'], queryFn: fetchPosts }); const dehydratedState = dehydrate(queryClient); return <HydrationBoundary state={dehydratedState}><PostList /></HydrationBoundary> — client nhận data đã fetch sẵn, không có loading flash. prefetchInfiniteQuery cho infinite scroll pages: pre-load trang đầu tiên trên server, user thấy content ngay.
• Prefetch trong route handler (Next.js): đặt prefetch logic trong layout.tsx để data sẵn sàng trước khi page.tsx render.

Pitfall: prefetchQuery không throw error (khác fetchQuery), query silently fails — luôn check error state ở component level.