How to Fetch Data in Server Component in Next.js

In Next.js, you fetch data in a server component by making the component function async and using await fetch() inside it. This runs on the server, so you can fetch data directly without client-side loading or hooks.

Syntax

To fetch data in a Next.js server component, define the component as an async function. Use await fetch(url) to get data from an API. Then parse the response with await response.json() and return JSX using the fetched data.

This runs only on the server during rendering, so no client-side JavaScript is needed for the data fetch.

javascript

export default async function MyServerComponent() {
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();

  return (
    <div>
      <h1>Data from API</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

Example

This example fetches a list of users from a public API and displays their names in a list. It shows how server components fetch data before rendering the page.

javascript

export default async function UsersList() {
  const res = await fetch('https://jsonplaceholder.typicode.com/users');
  const users = await res.json();

  return (
    <main>
      <h2>User List</h2>
      <ul>
        {users.map(user => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </main>
  );
}

Output

<main>
  <h2>User List</h2>
  <ul>
    <li>Leanne Graham</li>
    <li>Ervin Howell</li>
    <li>Clementine Bauch</li>
    <li>Patricia Lebsack</li>
    <li>Chelsey Dietrich</li>
    <li>Mrs. Dennis Schulist</li>
    <li>Kurtis Weissnat</li>
    <li>Nicholas Runolfsdottir V</li>
    <li>Glenna Reichert</li>
    <li>Clementina DuBuque</li>
  </ul>
</main>

Common Pitfalls

• Not marking the component as async: Without async, you cannot use await to fetch data.
• Using client-side hooks like useEffect in server components: Server components do not support React hooks that run on the client.
• Forgetting to handle fetch errors: Always consider adding error handling to avoid crashes.
• Using relative URLs without next.config.js setup: Use absolute URLs or configure fetch properly for internal APIs.

javascript

/* Wrong: Missing async keyword */
function WrongComponent() {
  const res = await fetch('https://api.example.com/data'); // Syntax error
  const data = await res.json();
  return <div>{data.title}</div>;
}

/* Right: Async function with await */
export default async function RightComponent() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();
  return <div>{data.title}</div>;
}

Quick Reference

• Make your server component function async.
• Use await fetch(url) to get data.
• Parse JSON with await response.json().
• Return JSX using the fetched data.
• Do not use client-side hooks like useEffect in server components.

Key Takeaways

Mark server components as async to use await for data fetching.

Use fetch inside server components to get data before rendering.

Avoid client-side hooks like useEffect in server components.

Handle fetch errors to prevent runtime crashes.

Use absolute URLs or configure fetch for internal API calls.