Fetching Data in Next.js

In this tutorial, you will learn how to fetch data in Next.js

Next.js gives multiple ways to fetch data. We will discuss the topics below to fetch the data.

Use the fetch() method in Server Components.
Use the fetch() method in Client Components.
Use async/await
Use Static Data Fetching
Use Dynamic Data Fetching
Use Caching & Revalidation
Use getStaticProps / getServerSideProps (Pages Router)

1. fetch() method in Server Components

Server components run on the server, and fetching all data will be secure, fast, and SEO friendly.

Example:


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

  return (
    <div>
      <h1>Users List</h1>
      {users.map((u) => (
        <p key={u.id}>{u.name}</p>
      ))}
    </div>
  );
}

Why is Server Component fetching best?

There are below points show that server component fetching is best.

1. It is best for SEO Optimisation.

2. It is used for automatic caching.

3. It is used for faster performance.

4. There is no API key exposed.

5. Less JavaScript in the browser.

2. fetch() method in Client Components

Client components run in the browser, so data fetching happens in the client side.

When to use Client-side fetching?

There are many points below to show that client-side fetching.

It is used for real-time data.
It is used for user-specific data (session).
It is used when the page is loaded.

Example:


"use client";
import { useEffect, useState } from "react";

export default function ClientUsers() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/users")
      .then((res) => res.json())
      .then((data) => setUsers(data));
  }, []);

  return (
    <div>
      <h1>Client-side Data</h1>
      {users.map((u) => <p key={u.id}>{u.name}</p>)}
    </div>
  );
}

Drawbacks of the client fetch() method

There are some drawbacks of the client fetch() method.

It’s not SEO friendly.
It is slower to initial render.
Exposes API keys.

3. Using async/await in Next.js

You can use async/await in the server components, Pages Router, and API Routes.

Example:


export default async function Page() {
  const response = await fetch("https://api.example.com/products");
  const products = await response.json();

  return (
    <div>
      {products.map((p) => (
        <h3 key={p.id}>{p.title}</h3>
      ))}
    </div>
  );
}