fetching-rules

To fetch data across server and client boundaries in Next.js, you use Server Component fetch for initial render and TanStack Query for hydration. This approach prefetches data on the server to improve SEO and LCP, then seamlessly hydrates interactive queries client-side.

Infinite scroll in TanStack Query v5 is handled using the useInfiniteQuery hook combined with an IntersectionObserver. This setup prefetches subsequent pages as the user scrolls, reducing perceived latency and maintaining smooth loading states across the application.

Managing cache invalidation requires structuring query keys using query-key factories and applying optimistic updates during mutations. This pattern ensures consistent data fetching, automatically synchronizes modified client state, and normalizes API errors through a centralized client layer.

Server Component fetch and TanStack Query work together for initial data loading by prefetching on the server and hydrating on the client. This unified strategy ensures SEO requirements are met while retaining interactive client-side caching and mutation capabilities.

Consistent loading and error states are managed through a centralized API client that handles authentication and error normalization. This layer enforces concrete workflows for data fetching, ensuring uniform state handling across both server and client boundaries.

Hydration issues occur when server-fetched data is not properly prefetched or passed to the TanStack Query client. Utilizing a structured workflow with query-key factories and explicit hydration boundaries ensures the server state matches the client cache during initial render.