Suggest an edit

Improve this article

Refine the answer for “Can await fetch be done directly in a component?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

In short: **yes, you can, but only in server components**.

Let's break it down in more detail so there is no confusion.

---

## When `await fetch` in a component is fine

In the **Next.js App Router**, all components are **server components by default**, which means:

- the component can be `async`
- you can write `await fetch(...)` directly in the component body
- the request runs **on the server**
- the browser receives ready-made HTML with the data

Example, in essence:

```js
export default async function Page() {
  const res = await fetch("https://api.example.com/posts")
  const posts = await res.json()

return (
    <ul>
      {posts.map(post => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  )
}
```

Here:

- there is no `useEffect`
- there is no loading after the render
- the data is already there when the page is shown

---

## Why this works specifically in Server Components

A Server Component:

- runs **only on the server**
- does not end up in the browser's JS bundle
- can be `async`
- can access APIs, a DB, secrets

Essentially, it is a React component plus server logic in one place.

---

## When `await fetch` **cannot** be done directly in a component

If the component is a **client component**, meaning it starts with:

```js
"use client"
```

- then you **cannot** write `await fetch` directly in the component body.

Reasons:

- client components must be synchronous
- rendering in the browser cannot "wait" for `await`

In that case, data is fetched:

- via `useEffect`
- or via libraries like SWR / React Query

---

## How to know where `fetch` will run

A simple rule:

- Server Component → `await fetch` runs **on the server**
- Client Component (`"use client"`) → fetch only:
  - in `useEffect`
  - in event handlers

---

## Can they be combined

Yes, and this is the most common approach:

- Server Component:
  - does `await fetch`
  - passes the data down
- Client Component:
  - is responsible for interactivity

This is considered the correct architecture in the App Router.

Markdown · drag & drop images · ⌘B / ⌘I shortcuts342 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.