Skip to main content

Can await fetch be done directly in a component?

Next.jsMiddle~1 min read
Suggest an edit

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.

Short Answer

Interview ready
Premium

A concise answer to help you respond confidently on this topic during an interview.

Suggest an edit