Data fetching in an effect
Why it matters
Fetching in useEffect runs after paint, twice in development, races on fast re-renders and creates client-side waterfalls; the App Router can fetch on the server instead.
Fix
Fetch in a Server Component and pass the data down, or use SWR / React Query in the client.
Credit
From the React team
You Might Not Need an Effect cautions that fetching in effects races and waterfalls, and prefers framework data fetching.
From the Next.js team
Recommends fetching data in Server Components instead of from the client.