Fetch in Server ComponentsFetch in Server Components

Time to data

Press Load page, then drag the sliders.

// app/users/page.tsx
async function UsersPage() {
  const users = await db.user.findMany();
  return <UserList initialData={users} />;
}

// user-list.tsx
'use client';
function UserList({ initialData }) {
  const [users, setUsers] = useState(initialData);
}

Where the key ends up

Type a key, then switch tabs.

// app/forecast/page.tsx
async function ForecastPage() {
  const days = await fetch('https://api.weather.dev/v1/forecast?city=Lisbon', {
    headers: { authorization: `Bearer ${process.env.WEATHER_KEY}` },
  }).then(r => r.json());

  return <Forecast initialData={days} />;
}

Which pattern?

Answer the questions.

Need to fetch data?
├── From a Server Component?
│   └── Use: Fetch directly (no API needed)
├── From a Client Component?
│   ├── Is it a mutation (POST/PUT/DELETE)?
│   │   └── Use: Server Action
│   └── Is it a read (GET)?
│       └── Use: Route Handler OR pass from Server Component
├── Need external API access (webhooks, third parties)?
│   └── Use: Route Handler
└── Need REST API for mobile app / external clients?
    └── Use: Route Handler

Why it matters, pros and cons