Placeholder data và initial data trong React Query khác gì nhau?

initialData được treat như real cached data và ảnh hưởng staleTime; placeholderData là temporary fill UI (isPlaceholderData=true), không persist vào cache — dùng placeholderData: prev => prev để giữ data trang trước khi paginate.

• Hai option này phục vụ mục đích khác nhau. placeholderData: data tạm thời để fill UI trong khi fetch, KHÔNG được lưu vào cache, không có timestamp, isPlaceholderData: true để component biết đang hiển thị placeholder.
• Dùng khi: muốn show skeleton data có structure (ví dụ array 5 empty items), hoặc placeholderData: (prev) => prev để giữ data page trước khi chuyển page (keepPreviousData pattern). initialData: được treat như real cached data — có dataUpdatedAt, ảnh hưởng staleTime (nếu initialData đủ fresh thì không refetch ngay).
• Dùng khi: data đã có từ nguồn khác (ví dụ đã fetch list, giờ dùng item từ list làm initialData cho detail query: initialData: () => queryClient.getQueryData(['todos'])?.find(t => t.id === id), initialDataUpdatedAt: () => queryClient.getQueryDataState(['todos'])?.dataUpdatedAt).
• Lưu ý: dùng sai initialData với hardcoded value sẽ ngăn query refetch vì React Query nghĩ data còn fresh — luôn kết hợp với initialDataUpdatedAt: 0 nếu muốn force refetch.

initialData is treated as real cached data and affects staleTime; placeholderData is temporary UI fill (isPlaceholderData=true), not persisted to cache — use placeholderData: prev => prev to retain previous page data during pagination.

• Both provide data to display before the actual fetch completes, but they behave differently: initialData — treated as real cached data; cached to disk if persistQueryClient is used; marks query as stale (triggers background refetch if staleTime has passed); suitable for data pre-fetched on the server (SSR). placeholderData — treated as fake/temporary data; NOT persisted to cache; query still shows as loading (isPlaceholderData is true); replaced by real data when fetch completes; suitable for skeleton/placeholder UI where you want to show the query as still loading.
• In Next.js with SSR: use initialData with dehydrate/HydrationBoundary to pass server-fetched data to the client.
• Use placeholderData: keepPreviousData (or previousData function) when paginating to avoid blank states between page transitions.