React › Server-Side Rendering (SSR) & Next.js

How does data fetching work differently in a Next.js Server Component compared to fetching data in a regular client rendered React app?

Advanced

Answer

Inside a Server Component, you can simply use await directly in the component function to fetch data, since the code runs on the server, without needing useEffect, useState, or a loading spinner for the initial request. Next.js also automatically caches many of these server fetch requests to avoid repeating the same work unnecessarily.

export default async function ProductPage({ params }) {
  const product = await fetch(`https://api.example.com/products/${params.id}`).then((r) => r.json());
  return <h1>{product.name}</h1>;
}

Real-world example A product page in a Next.js app fetches its data directly using await inside the Server Component, completely skipping the loading spinner and useEffect pattern that a purely client rendered version of the same page would need.

Common follow-ups: How does Next.js decide whether to cache a specific fetch request or fetch fresh data every time?;What happens if the awaited fetch call fails inside a Server Component?

Server Components;Data Fetching (React Query & SWR)