useQuery in client components

Question

I have a very simple app with a single page configured to use SSR. The component that the page renders requests data using the tRPC client and useQuery function. I modified the component to be a client component by adding use client on top of the file.
The result I expected to see was app fetching the component from the server and loading data asynchronously from the client.
Instead, the server's response is delayed until the data is loaded and the browser renders component with the data already loaded.

Is it possible to use the combination of tRPC + SSR + use client? If so, wouldn't the code below result in the behavior I was expecting?

// src/pages/index.tsx
"use client";

import { trpc } from "../utils/trpc";

export default function HomePage() {

// Expecting to see "Loading..." first but the message is displayed immediately after
  // a 2 seconds delay before rendering the page for the first time.

const result = trpc.greeting.useQuery({
    name: "Bob",
  });

if (!result.data) {
    return Loading...;
  }

return {result.data.message};
}

// src/pages/apis/trpc/[trpc].ts
const appRouter = router({
  greeting: publicProcedure
    .query(async ({ input }) = {
      await new Promise((resolve) = setTimeout(resolve, 2000));

return {
        message: Hello ${input.name}!,
      };
    }),
});
// src/utils/trpc.ts
export const trpc = createTRPCNext({
  config(opts) {
    const { ctx } = opts;

return {
      links: [
        httpBatchLink({
          // ...
        }),
      ],

queryClientConfig: {
        // ...
      },
    };
  },

ssr: true,
});
`

`useQuery` in client components

Looking for more? Join the community!