server side ref

Is there a way to create a ref of a "use server" component to pass it down to a a client component :

"use server"
// [...]
async function MyServerComponent(){
 // useRef doesn't work here
 return
  <>
   <MyClientComponent refs={[ref1, ref2]} />
   <Component1 ref={ref1} />
   <Component2 ref={ref2} />
  </> 
}

"use server"
// [...]
async function MyServerComponent(){
 // useRef doesn't work here
 return
  <>
   <MyClientComponent refs={[ref1, ref2]} />
   <Component1 ref={ref1} />
   <Component2 ref={ref2} />
  </> 
}

2 Replies

ATOMowy_grzyb•12mo ago

you don't "use server" components, that is for server actions and it's hard to understand what you're trying to do, let a component reference its siblings? then you should extract that logic into a parent component that wraps the children it needs to control

Glorrin•12mo ago

you don't "use server" components, that is for server actions I didn't know about that thanks 🙂 I am using ant design (sigh) and using the tour component, ant design is not realy easy to work with, but the tour component is exactly what I need : highlight the component I am trying to explain and show a pop up. What it does is not important what is important is what it needs: A ref on each element it highlights in the correct order. For that I need to create a ref a apply it to each element. This works fine in a client component with use ref. But on a server component useRef is not available. I can put every thing in another file but it is a bit annoying to create a new file just for that. Also data fetching and data usage gets separated and thats realy annoying for debugging or changing the page.

Gaming

Programming

server side ref