ssr-data-fetching

To prefetch data in Next.js server components and hydrate it with TanStack Query, run server-side prefetch functions and wrap your page with HydrationBoundary to pass the dehydrated state to client hooks for seamless hydration.

TanStack Query hydration mismatches occur when server prefetch and client hooks use inconsistent query keys. Enforcing identical query keys between your server prefetch functions and client components ensures consistent hydration.

Yes, you can validate API responses during SSR data fetching by applying zod schemas within your server and client API client wiring to ensure type safety before hydrating the data on the client.

The best way to prevent loading spinners on initial render is using SSR-first data fetching with server prefetch and HydrationBoundary, ensuring pages render fully with data on first paint and reduce perceived latency.

Yes, this SSR data fetching approach explicitly supports Next.js server components, page routes, and client components that rely on pre-fetched data, hydration consistency, and API client wiring.