tanstack-integration-best-practices

To coordinate TanStack Router and React Query for SSR data prefetching, wire loader-based data prefetching directly into route definitions. This ensures router loaders populate the query cache before SSR hydration, enabling instant UI delivery.

Hydration mismatches during route navigation in TanStack Start occur when server-side fetched data and client-side query caches are not aligned. You must enforce coordinated caching and automatic SSR dehydration/hydration rules to ensure consistent data flow.

The best way to set up a per-request QueryClient in a TanStack Start project is to instantiate a fresh QueryClient for each server request. This isolates user data and correctly wires SSR hydration using the recommended router integration.

SSR dehydration and hydration across route navigations in TanStack apps works by serializing the server-side query cache and sending it with the HTML payload. The client then hydrates this cache to prevent redundant fetches and maintain instant UI states.

Yes, you can use loader-based data prefetch to automatically update TanStack Query caches. By coordinating loader data with query caches, the router integration ensures prefetched data is immediately available for SSR-safe hydration without duplicate requests.

While basic navigation relies on loader-based prefetch, you need to enforce coordinated caching and invalidation rules to maintain data consistency. This prevents stale data across full-stack TanStack apps by synchronizing router state with query invalidation triggers.