Next.js Data Fetching, Part 1: Overview and Core Concepts

📅

loading..🐩🐩🐩🐩

Before getting started 🔗

This post is based on Next.js 15. Some details may change in later versions.

Next.js App Router combines modern React features with a server-centered approach to data fetching.

This can help build faster and more efficient web applications.

This series explores the feature from basic concepts to advanced usage.

Part 1 covers:

Where data fetching happens in App Router.
How the fetch function works.
Data flow based on server components.
A basic fetch example.

Data fetching overview 🔗

Next.js App Router operates on React Server Components (SSR).

Server components can use server-only capabilities unavailable in the browser, including data fetching.

Next.js generally recommends

fetching data on the server

Doing so prepares the HTML before sending it to the client, which benefits loading speed and SEO.

When and where should you fetch data? 🔗

Next.js can retrieve data in these places:

Server components (the default)
: Recommended for most data.
Client components
: Used when data must be retrieved dynamically after user interaction.
Route handlers (API routes)
: Act as backend APIs and communicate with external systems.
Because App Router uses folder-based routing, data is fetched inside component files in the app/ directory.

The basics of fetch 🔗

The function most commonly used to retrieve data in Next.js is fetch.

It is almost the same as the browser's native fetch, but Next.js gives it special behavior.

For example, the following code retrieves posts from JSONPlaceholder.

app/page.tsx

export default async function Page() {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts');
  const posts = await res.json();
  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

The code runs in a server component and fetches data before rendering HTML.

Compared with fetching data on the client and showing a loading state, this can provide a faster and more stable user experience.

How fetch works and its features 🔗

Next.js fetch has the following features.

Automatic caching: By default, fetch caches identical requests.
Cache control: Disable caching through configuration with cache: 'no-store'.
ISR support: Configure periodic updates with next.revalidate.

The next part covers these settings in detail.

Conclusion 🔗

We have learned how data fetching works in Next.js, where it can happen, and the basics of fetch.

Prerendering data through server components offers benefits for both performance and SEO.

The next part explores advanced fetch options, caching behavior, and ISR.

Further questions 🔗

How do React Server Components work, and how are they distinguished from client components?
Why can fetching data on the server be preferable to fetching it on the client?

References 🔗

Next.js Data Fetching, Part 1: Overview and Core Concepts | PromleeBlog