Anand•2mo ago

what will happen if we do not wrap the client component with hydrate client?

https://trpc.io/docs/client/react/server-components#utilizing-your-api

import { trpc } from '~/trpc/server';
import { ClientGreeting } from './client-greeting';

export default async function Home() {
  void trpc.hello.prefetch();

  return (
    <HydrateClient>
      <div>...</div>
      {/** ... */}
      <ClientGreeting />
    </HydrateClient>
  );
}

import { trpc } from '~/trpc/server';
import { ClientGreeting } from './client-greeting';

export default async function Home() {
  void trpc.hello.prefetch();

  return (
    <HydrateClient>
      <div>...</div>
      {/** ... */}
      <ClientGreeting />
    </HydrateClient>
  );
}

because I did not and my app works just fine, moreover I even removed the prefetch, yet all the client component (using useSuspenseQuery) worked fine and do not fetch on client (till after stale time). I was just wondering what is the use case of prefetch() an HydrateClient

1 Reply

AnandOP•2mo ago

I ask this because I am able to still technically prefetch data on my ClientComponent while use suspense query So is the HydrateClient necessary? Does it provide any performance gainz?