You simply can not use useEffect in a server component. If you want to use that hook, use it in a client component

i never said ill use useEffect in a server component

my entire question is

useEffect in the client component to fetch its own data

or fetching in server component that uses the client component and passing the data as props to the client component

You didn't even ask a question, but I assume you're asking which is preferable.

I would say server component wrapped in suspense for loading states if required. Reason being during development, useEffect is called twice, and you can get screen flicker as it only calls on page render

(also server components work when JS is disabled in the client)