next/no-async-client-component

Why

Only Server Components can be async. An async component in a 'use client' file returns a promise on every render, which React does not support on the client: the component suspends forever, re-fetches in a loop or throws, depending on how it is reached.

Fix

Do the await in a Server Component and pass the result down as props, or start the request on the server, pass the promise, and read it in the client component with use(promise) inside <Suspense>. For data that must load in the browser, use a data library (TanStack Query, SWR) or an effect with cleanup.

Examples

// bad
'use client'
export default async function Cart() { const items = await getCart(); return <CartList items={items} /> }
// good
'use client'
export default function Cart({ itemsPromise }) { const items = use(itemsPromise); return <CartList items={items} /> }

Sources

• Next.js docs, No async Client Component
• Next.js docs, Server and Client Components

Read it in the terminal

npx github:dawidolko/frontend-skills explain next/no-async-client-component