mediumFrontend

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

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

**TL;DR.** 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, and the data **never ships** to the client. async component await fetch/db rendered HTML data stays server-side <marker id='nh1' markerWidth

207 views

Understand the problem

async components with fetch or direct DB access.

nextjsdata-fetchingserver-componentsfetch

Attempt it yourself

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

Stuck? AI Nudge Available

Get a conceptual hint to guide your logic without spoiling the final implementation.

Study the solution

The solution is waiting

Give it an honest attempt first — then compare your thinking with the full walkthrough.

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} /></>;
}

Join the discussion

Discussion (0)

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

What is loading.js in Next.js and how does Suspense streaming work?

How do you deploy a Next.js app (Vercel vs self-hosted)?