The Prince Academy株式会社 | Choosing the Right Data Fetching Strategy | Data Fetching in Next.js: Getting Information to Your Users | Next.js: A Practical Introduction for Developers

Choosing the right data fetching strategy in Next.js is crucial for delivering a performant and user-friendly experience. Next.js offers a variety of approaches, each with its own strengths and ideal use cases. Understanding these options will empower you to make informed decisions about how your application retrieves and displays data.

The primary consideration when selecting a data fetching strategy is when and where you want the data to be fetched. Do you need it at build time for static generation, on the server at request time, or on the client after the page has loaded?

Here's a breakdown of the most common data fetching strategies in Next.js, helping you navigate the choices:

Static Site Generation (SSG): Pre-rendering at Build Time

This is ideal for content that doesn't change frequently, such as blog posts, marketing pages, or product listings. Next.js fetches the data at build time, generating static HTML files for each page. This results in incredibly fast load times because the server doesn't need to do any work when a user requests the page – it just serves the pre-built HTML.

You achieve SSG using getStaticProps in your page components. The data fetched here is available on the client-side during hydration. For dynamic routes, getStaticPaths is used to pre-render a list of paths.

export async function getStaticProps(context) {
  const res = await fetch('https://api.example.com/posts');
  const posts = await res.json();

  return {
    props: {
      posts,
    },
  };
}

Server-Side Rendering (SSR): Rendering at Request Time

Here's a breakdown of the most common data fetching strategies in Next.js, helping you navigate the choices:

Static Site Generation (SSG): Pre-rendering at Build Time

export async function getStaticProps(context) {
  const res = await fetch('https://api.example.com/posts');
  const posts = await res.json();

  return {
    props: {
      posts,
    },
  };
}

Server-Side Rendering (SSR): Rendering at Request Time