1. initial data:

"use client"
import {useQuery} from "@tanstack/react-query"
import {getProducts} from "@/services/get-products"

export async function Products({products}){
  await {data}= useQuery({
    queryKey:["products"],
    queryFn:getProducts,
    initialData:products
  })

  return(
    <div>
      <h1>Products</h1>
      {
        data.map(product=>(
          <div>
            <h2>{product.name}</h2>
          </div>
        ))
      }
    </div>
  )
}

1. Server component:

import {dehydrate, HydrateBoundary} from "@tanstack/react-query"
import {getQueryClient} from "./getQueryClient"
import {getPosts} from "@/services/get-post"

export async function PostsPage(){
	const queryClient = getQueryClient()

  await queryClient.prefetchQuery({
	  queryKey:["posts"],
     queryFn:getPosts
  })

	  return(
	    <HydrateBoundary state={dehydrate(queryClient)}>
	      <Post />
      </HydrateBoundary>
    )
 }