Förklaring

Async-komponenter är ett Server Component-koncept. React renderar serverkomponenter asynkront och inväntar deras svar, men klientkomponenter renderas synkront i webbläsaren och kan inte vara async funktioner.

Felet uppstår vanligast i två situationer: när en server-komponent av misstag märks med 'use client', eller när en klientkomponent görs async för att kunna använda await direkt i komponentkroppen i stället för useEffect.

Datahämtning i klientkomponenter hanteras med useEffect och lokalt state, eller med ett datahämtningsbibliotek.

Vanliga orsaker

'use client' tillagt i en server-komponent utan att ta bort async-nyckelordet. async tillagt i en klientkomponent för att hämta data direkt i render-fasen.

Lösning

Ta antingen bort 'use client' och behåll async, eller ta bort async och hämta data med useEffect:

// Alternativ 1 — behåll som server-komponent
export default async function Page() {
  const data = await fetchData();
  return <div>{data.title}</div>;
}

// Alternativ 2 — klientkomponent med useEffect
'use client';
import { useState, useEffect } from 'react';

export default function Component() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetchData().then(setData);
  }, []);

  return data ? <div>{data.title}</div> : <div>Laddar...</div>;
}