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

Prefetch là fetch data trước khi user cần, để bỏ hẳn trạng thái loading.

Phía client — prefetch lúc hover, đến khi user click thì data đã sẵn:

const handleMouseEnter = () =>
  queryClient.prefetchQuery({
    queryKey: ['post', id],
    queryFn: () => fetchPost(id),
    staleTime: 30_000,
  })

Phía server với Next.js App Router — client nhận data đã fetch sẵn, không có flash trắng:

const queryClient = new QueryClient()
await queryClient.prefetchQuery({ queryKey: ['posts'], queryFn: fetchPosts })

return (
  <HydrationBoundary state={dehydrate(queryClient)}>
    <PostList />
  </HydrationBoundary>
)

• prefetchInfiniteQuery pre-load trang đầu của infinite scroll ngay trên server, user thấy content luôn.
• Đặt prefetch trong layout.tsx để data sẵn sàng trước khi page.tsx render.

Lưu ý: prefetchQuery không throw error (khác fetchQuery) — query fail âm thầm, nên vẫn phải kiểm tra error state ở component.