lazy-prefetch-pattern

Lazy prefetching reduces initial load time by preloading React Query v5 data before TSX components render. Dehydrate pending queries on the server and hydrate on the client to eliminate waterfalls and render with data already available.

Lazy prefetching is a React Query v5 technique that defers data fetching until needed, then captures pending queries using dehydrate() for fast hydration. This reduces UI jank by ensuring data is ready when components mount.

Yes. React Query v5 lazy prefetch integrates with SSR hydration workflows by dehydrating the query cache on the server and rehydrating on the client, enabling TSX components to render instantly with preloaded data.

Use React Query v5 lazy prefetch to preload data when navigating to routes that render TSX components. Dehydrate the query cache before navigation and hydrate on client render to avoid loading spinners.

Yes. Lazy prefetching seamlessly integrates with existing React Query query clients in TSX files. Use dehydrate() to capture pending queries and integrate with your current query setup without refactoring.

Use dehydrate() for SSR and route-level preloading scenarios where you need to serialize the query cache and hydrate on the client. It's ideal for component-level prefetch on mount and reducing initial navigation latency in TSX applications.