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>
  );
}

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

useSuspenseQuery

) worked fine and do not fetch on client (till after stale time).
I was just wondering what is the use case of

prefetch()

prefetch()

prefetch()

prefetch() an

HydrateClient

HydrateClient

HydrateClient

HydrateClient

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

Similar Threads

Similar Threads

Similar Threads