Rethinking Data Fetching with React Server Components

The Waterfall Problem

Traditional React apps often suffer from "request waterfalls" where child components wait for parents to finish fetching before they can start their own.

Enter Server Components

With RSC, we can fetch data directly on the server, right next to the database.

export default async function Page() {
  const data = await db.post.findMany();
  return <PostList posts={data} />;
}

No more useEffect, no more loading spinners for simple data. It just renders.