HydrateClient placement

[kaeon]

I did a lot of testing with different prefetch, useQuery, useSuspenseQuery, ... scenario's.

What worked the best for me was:

• Prefetch without await
• UseQuery in the client with isFetching (spinner) or isError
• Wrapping server page in

While this worked perfectly on development, I have a weird issue on production. Initial page load as expected: prefetching and while it runs shows spinner. But when I navigate away from the page and go to it via a it prefetches and doesn't show a spinner or anything until it has fully done.

Now I tried using in a higher layout.tsx file instead and then everything works as expected. What is the recommended approach here? I asked AI and it says using HydrateClient higher level can really build up a huge cache for nextjs. Is this true? And if so, is this cache on the server or client?