product/page.tsx

import CompA from "./CompA";
const apicall = async () => {
    const res = await fetch("https://fakestoreapi.com/products", {
        next:{
            revalidate: 10 // 10 second 
        }
    });
    return await res.json()
}
const page = async () => {
    const data = await apicall()
  return (
    <>
    <CompA product={data} />
    </>
  )
}
export default page

'use client'
import React from 'react'
import { Product } from './product.types'
import CompB from './CompB'
const CompA = ({product}:{product:Product[]}) => {
    
  return (
    <>
<CompB product={product} />
    </>
  )
}
export default CompA

'use client'
import React from 'react'
import Image from 'next/image';
import { Product } from './product.types';
import { FaStar } from "react-icons/fa";
const Compb = ({ product }: { product: Product[] }) => {
  return (
    <>
      // show the data here
       
    </>
  );
};

export default Compb