Server-side data fetching

In Server Components, data fetching is often just async code in the component—no useEffect, no loading spinner boilerplate on the client for the initial HTML.

Fetch in a page

export default async function Page() {
  const res = await fetch('https://api.example.com/posts', {
    next: { revalidate: 60 },
  });
  const posts = await res.json();
  return <PostList posts={posts} />;
}

Direct database access

With an ORM (Prisma, Drizzle), call the database directly in the Server Component—no separate REST layer required for internal data.

Parallel fetching

const [user, orders] = await Promise.all([
  getUser(id),
  getOrders(id),
]);

Avoid sequential awaits for independent queries—they add latency.

Important interview questions and answers

1. Q: fetch in Server Component vs useEffect?
   A: Server fetch runs once per request/build on the server; useEffect runs client-side after hydration—bad for SEO-critical initial data.
2. Q: Can you use fetch cache options?
   A: Yes—cache, next.revalidate, and tags integrate with Next.js Data Cache.

Self-check

1. Why is async/await natural in Server Components?
2. When would you still fetch on the client?