Sign in
Skip to solution
mediumFrontend

How do you fetch data in Next.js Server Components?

207 views
01

Understand the problem

async components with fetch or direct DB access.

nextjsdata-fetchingserver-componentsfetch
02

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Nudge consolestandby

Stuck? Beam a request up — the console returns a conceptual nudge that guides your logic without spoiling the implementation.

03

Study the solution

Server Components can be async and await data directly — call fetch() (which integrates with Next.js caching) or query your database/ORM straight in the component. No getServerSideProps needed; the data never ships to the client.

Solution ready — 2 min read

Classified // press E to declassify

04

Read the code

Parallel fetches in a Server Component
// app/dashboard/page.tsx — Server Component
export default async function Dashboard() {
  // parallel, not sequential → no waterfall
  const [user, orders] = await Promise.all([
    fetch('https://api/user', { next: { revalidate: 60 } }).then(r => r.json()),
    db.order.findMany(),            // direct DB access, server-only
  ]);
  return <><Profile user={user} /><Orders orders={orders} /></>;
}
05

Join the discussion

Discussion (0)

Sign in to join the discussion.

No responses yet. Be the first to share what you think.

Transmission complete // awaiting log

KEEP THE
STREAK ALIVE.

Dossier 63 of 95 decoded in the Next.js track. One more won't hurt.

Back to track