Use Server Components to Fetch Data

Next.js

React

JavaScript

Technical Specification

Create a server component that fetches data on the server and passes it to the client.

Input/Output Samples

Input:/users

Output:Initial HTML already contains user data

Optimal Logic Path

export default async function UsersPage() {
  const res = await fetch("https://jsonplaceholder.typicode.com/users");
  const users = await res.json();
  return (
    <main>
      <h1>Users</h1>
      <ul>
        {users.map((u) => (
          <li key={u.id}>{u.name}</li>
        ))}
      </ul>
    </main>
  );
}

Architectural Deep-Dive

Server components run on the server, so fetch runs at request/build time and sends HTML to the client.