Error: async/await is not yet supported in Client Components, only Server Components.

Workarounds

1. 94% success Move the async data fetching into useEffect with useState

   'use client';
   import { useState, useEffect } from 'react';
   
   export default function MyComponent() {
     const [data, setData] = useState(null);
     useEffect(() => {
       async function fetchData() {
         const res = await fetch('/api/data');
         setData(await res.json());
       }
       fetchData();
     }, []);
     if (!data) return <div>Loading...</div>;
     return <div>{data.title}</div>;
   }

   Sources: https://nextjs.org/docs/app/building-your-application/data-fetching/fetching#fetching-data-on-the-client

2. 95% success Fetch data in a Server Component parent and pass it as props

   // page.tsx (Server Component, no 'use client')
   import { ClientComponent } from './ClientComponent';
   export default async function Page() {
     const data = await fetch('https://api.example.com/data').then(r => r.json());
     return <ClientComponent data={data} />;
   }
   
   // ClientComponent.tsx
   'use client';
   export function ClientComponent({ data }) {
     const [state, setState] = useState(data);
     return <div>{state.title}</div>;
   }

   Sources: https://nextjs.org/docs/app/building-your-application/rendering/composition-patterns#moving-client-components-down-the-tree

3. 89% success Use a Server Action for on-demand data fetching from the client

   // actions.ts
   'use server';
   export async function getData(id: string) {
     const res = await fetch(`https://api.example.com/data/${id}`);
     return res.json();
   }
   
   // ClientComponent.tsx
   'use client';
   import { getData } from './actions';
   import { useTransition } from 'react';
   
   export function ClientComponent() {
     const [isPending, startTransition] = useTransition();
     const [data, setData] = useState(null);
     const handleClick = () => {
       startTransition(async () => {
         const result = await getData('123');
         setData(result);
       });
     };
   }

   Sources: https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations