A lot of people are saying that use React Query for efficient data retrieval. But to use useQuery hook I have to make every component "client component" then what would be the purpose of SSR and SSG in Nextjs.

Please clear my confusion

I was just looking at the docs.

A lot of people are saying that use React Query for efficient data retrieval. But to use useQuery hook I have to make every component "client component" then what would be the purpose of SSR and SSG in Nextjs.

Please clear my confusion

I was just looking at the docs.

• reactjs
• react-query
• tanstackreact-query

1 Answer 1

In Next.js, you are allowed to pass server components as props of client component.

For example this code:

<ClientComponent>
   <ServerComponent />
</ClientComponent>

You can view the docs Server and Client Composition Patterns – Supported Pattern: Passing Server Components to Client Components as Props

In human terms, you can see it as Next.js send both components back to the client at the same time. One already rendered by the server, and one for client to render for themselves. Then, the client can piece those two components according to the layout.

So it allows for SSR while also allowing for client-side dependency injection like <Providers> or in this case <QueryClientProvider />