useQuery then server component possibility?

If I understand react server component correct, there is no way to render server component with props received from client component inside client component.

The case is:

'use client'

import HugeRenderer from './HugeRenderer' // a quite big one which would be better if it's a server component that doesn't deliver unused libraries

function Client() {
 const { data } = useMyQuery(...)

 return <HugeRenderer value={data} />
}

'use client'

import HugeRenderer from './HugeRenderer' // a quite big one which would be better if it's a server component that doesn't deliver unused libraries

function Client() {
 const { data } = useMyQuery(...)

 return <HugeRenderer value={data} />
}

The reason I have to fetch data inside a client component using

useMyQuery

useMyQuery

is that the state management of that

data

data

can be quite complex on client side. For example, I need to do a lot of optimistic updating and state syncing, stale controlling in multiple far-away components with it. This is the reason react-query lives I think.

I think the only solution for me is to use lazy loading on the

HugeRenderer

HugeRenderer

to make it progressive loaded?

Thanks in advance.

TanStack•3y ago•

2 replies

then-purple

useQuery then server component possibility?

If I understand react server component correct, there is no way to render server component with props received from client component inside client component.

The case is:

'use client'

import HugeRenderer from './HugeRenderer' // a quite big one which would be better if it's a server component that doesn't deliver unused libraries

function Client() {
 const { data } = useMyQuery(...)

 return <HugeRenderer value={data} />
}

'use client'

import HugeRenderer from './HugeRenderer' // a quite big one which would be better if it's a server component that doesn't deliver unused libraries

function Client() {
 const { data } = useMyQuery(...)

 return <HugeRenderer value={data} />
}

The reason I have to fetch data inside a client component using

useMyQuery

useMyQuery

is that the state management of that

data

data

HugeRenderer

HugeRenderer

to make it progressive loaded?

Thanks in advance.

useQuery then server component possibility?

Similar Threads

useQuery then server component possibility?

Similar Threads

Similar Threads

Similar Threads