T
TanStack•3y ago
genetic-orange

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 is that the state management of that 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 to make it progressive loaded? Thanks in advance.
2 Replies
national-gold
national-gold•3y ago
No, you cant use a server component that consumes the prop of a client component - primarily since the server does the work before the client starts. What's the impact of the HugeRenderer like ?
genetic-orange
genetic-orangeOP•3y ago
Thanks. it's currently like 500kb+ and growing fast. it's a markdown renderer with many complex custom rendering logics and libraries. Because it's not possible to make it a server component as you pointed out, I'm trying to dynamic loading the child components of it as much as I can

Did you find this page helpful?