so, hear me out

I want to access data on server component in NextJS , that was pre-fetched from client side using React Query.
Because this server component, is actually in another route (I use App Router).

So this is AdItem.jsx (client component, displays a card):

 return (
    <>
   
   {/*  href={`/${nameOfUrl}/${url}`} */}
      <Link href={`/details/${nameOfUrl}/${url}`}>
        <div
          className={`border p-1 flex flex-col ${styles.adItemDropShadow} duration-300 group cursor-pointer`}
        

          onMouseEnter={()=> {
            queryClient.prefetchQuery({
              queryKey: ['details' , nameOfUrl , url],
              queryFn: fetchAdItemServer(url)
            })
          }}
        
        >

And then, on that (app) route /details/[nameOfGroup]/[seo] , I got server component, and I wish to use that pre-fetched data that was loaded previously

const AutomobiliDetails = async ({ params }) => {
  const { seo, nameOfGroup } = await params;

  let adDetail = useQuery({
    queryKey: ['posts'],
    queryFn: fetchAdItemServer(seo),
  })
  console.log(adDetail)

Because otherwise I have to fetch data again, and previously pre-fetching data make no sense.

I don't want to pre-fetch in server component and pass it in client, but want to have that data available to use in server component.

Or is this bad practice. I'm trying to improve performance, and don't want to make whole nextjs "use client", as then it seems like I still use React then.