Data Fetching

The Next.js App Router introduces a new, simplified data fetching system built on React and the Web platform. This page will go through the fundamental concepts and patterns to help you manage your data's lifecycle.

Here's a quick overview of the recommendations on this page:

1. Fetch data on the server using Server Components.
2. Fetch data in parallel to minimize waterfalls and reduce loading times.
3. For Layouts and Pages, fetch data where it's used. Next.js will automatically dedupe requests in a tree.
4. Use Loading UI, Streaming and Suspense to progressively render a page and show a result to the user while the rest of the content loads.

The fetch() API

The new data fetching system is built on top of the native fetch() Web API and makes use of async and await in Server Components.

• React extends fetch to provide automatic request deduping.
• Next.js extends the fetch options object to allow each request to set its own caching and revalidating rules.

Learn how to use fetch in Next.js.

Fetching Data on the Server

Whenever possible, we recommend fetching data in Server Components. Server Components always fetch data on the server. This allows you to:

• Have direct access to backend data resources (e.g. databases).
• Keep your application more secure by preventing sensitive information, such as access tokens and API keys, from being exposed to the client.
• Fetch data and render in the same environment. This reduces both the back-and-forth communication between client and server, as well as the work on the main thread on the client.
• Perform multiple data fetches with single round-trip instead of multiple individual requests on the client.
• Reduce client-server waterfalls.
• Depending on your region, data fetching can also happen closer to your data source, reducing latency and improving performance.

Good to know: It's still possible to fetch data client-side. We recommend using a third-party library such as SWR or React Query with Client Components. In the future, it'll also be possible to fetch data in Client Components using React's use() hook.

Fetching Data at the Component Level

In the App Router, you can fetch data inside layouts, pages, and components. Data fetching is also compatible with Streaming and Suspense.

Good to know: For layouts, it's not possible to pass data between a parent layout and its children components. We recommend fetching data directly inside the layout that needs it, even if you're requesting the same data multiple times in a route. Behind the scenes, React and Next.js will cache and dedupe requests to avoid the same data being fetched more than once.

Parallel and Sequential Data Fetching

When fetching data inside components, you need to be aware of two data fetching patterns: Parallel and Sequential.

• With parallel data fetching, requests in a route are eagerly initiated and will load data at the same time. This reduces client-server waterfalls and the total time it takes to load data.
• With sequential data fetching, requests in a route are dependent on each other and create waterfalls. There may be cases where you want this pattern because one fetch depends on the result of the other, or you want a condition to be satisfied before the next fetch to save resources. However, this behavior can also be unintentional and lead to longer loading times.

Learn how to implement parallel and sequential data fetching.

Automatic fetch() Request Deduping

If you need to fetch the same data (e.g. current user) in multiple components in a tree, Next.js will automatically cache fetch requests (GET) that have the same input in a temporary cache. This optimization prevents the same data from being fetched more than once during a rendering pass.

• On the server, the cache lasts the lifetime of a server request until the rendering process completes.
  • This optimization applies to fetch requests made in Layouts, Pages, Server Components, generateMetadata and generateStaticParams.
  • This optimization also applies during static generation.
• On the client, the cache lasts the duration of a session (which could include multiple client-side re-renders) before a full page reload.

Good to know:

• POST requests are not automatically deduplicated. Learn more about caching.
• If you're unable to use fetch, React provides a cache function to allow you to manually cache data for the duration of the request.

Static and Dynamic Data Fetching

There are two types of data: Static and Dynamic.

• Static Data is data that doesn't change often. For example, a blog post.
• Dynamic Data is data that changes often or can be specific to users. For example, a shopping cart list.

By default, Next.js automatically does static fetches. This means that the data will be fetched at build time, cached, and reused on each request. As a developer, you have control over how the static data is cached and revalidated.

There are two benefits to using static data:

1. It reduces the load on your database by minimizing the number of requests made.
2. The data is automatically cached for improved loading performance.

However, if your data is personalized to the user or you want to always fetch the latest data, you can mark requests as dynamic and fetch data on each request without caching.

Learn how to do Static and Dynamic data fetching.

Caching Data

Caching is the process of storing data in a location (e.g. Content Delivery Network) so it doesn't need to be re-fetched from the original source on each request.

The Next.js Cache is a persistent HTTP cache that can be globally distributed. This means the cache can scale automatically and be shared across multiple regions depending on your platform (e.g. Vercel).

Next.js extends the options object of the fetch() function to allow each request on the server to set its own persistent caching behavior. Together with component-level data fetching, this allows you to configure caching within your application code directly where the data is being used.

During server rendering, when Next.js comes across a fetch, it will check the cache to see if the data is already available. If it is, it will return the cached data. If not, it will fetch and store data for future requests.

Good to know: If you're unable to use fetch, React provides a cache function to allow you to manually cache data for the duration of the request.

Learn more about caching in Next.js.

Revalidating Data

Revalidation is the process of purging the cache and re-fetching the latest data. This is useful when your data changes and you want to ensure your application shows the latest version without having to rebuild your entire application.

Next.js provides two types of revalidation:

• Background: Revalidates the data at a specific time interval.
• On-demand: Revalidates the data whenever there is an update.

Learn how to revalidate data.

Streaming and Suspense

Streaming and Suspense are new React features that allow you to progressively render and incrementally stream rendered units of the UI to the client.

With Server Components and nested layouts, you're able to instantly render parts of the page that do not specifically require data, and show a loading state for parts of the page that are fetching data. This means the user does not have to wait for the entire page to load before they can start interacting with it.

To learn more about Streaming and Suspense, see the Loading UI and Streaming and Suspense pages.

Old Methods

Previous Next.js data fetching methods such as getServerSideProps, getStaticProps, and getInitialProps are not supported in the new App Router. However, you can still use them in the Pages Router.

Next Steps

Now that you understand the fundamentals of data fetching in Next.js, you can learn more about managing data in your application: