Infinite component refresh when fetching data

[topaz crown]

I have an issue with my next.js 13.4 app. I created a cilent-side parent which passing as a prop current user email. The child is a server-side component which feching data using prop from the parent. The issue is when I start server and enter to url with my component I get infinite refresh and I can't see anything on the page.

[pastel flower]

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

      🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in <id:customize>

      ✅ You can mark a message as the answer for your post with `Right click -> Apps -> Mark Solution`
      (if you don't see the option, try refreshing Discord with Ctrl + R)

[deft cape]

client components cannot be async

since you imported Data to a client component, Data implicitly becomes a client component

[topaz crown]

So how to solve my issue? What I schould do?

[deft cape]

if you want to use an async component, ensure it is a server component, e.g. with the following

import Data from "./Data"

const Page = async () => {
  // https://next-auth.js.org/configuration/nextjs#in-app-directory
  const session = await getServerSession(...);
  return <Data email={session.data?.user?.email}/>
  )
}
export default Page

if you want to keep using client components, use react-query or swr to fetch data