Next.js 13 introduced a new way to fetch and manage data in your application. The API has been simplified to align with React and the Web Platform. This means previous Next.js APIs such as
getInitialProps are not supported in the new
app directory. Instead, there is a more flexible way to fetch, cache, and revalidate data at the component level.
This page will go through the fundamental concepts and recommended best practices to help you manage your application's data lifecycle.
Fetching data directly in Server Components comes with many benefits, as this fetching pattern allows you to:
Good to know: It's still possible to fetch data in Client Components. We recommend using a third-party library such as SWR or React Query. In the future, it'll also be possible to fetch data in Client Components using React's
For layouts, it's not possible to pass data between a parent layout and its children. 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.
When fetching data in 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 will load data in a waterfall pattern. 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, sequential data fetching can be unintentional and lead to longer loading times.
To learn how to implement these patterns in Next.js, see the Data Fetching Patterns section.
fetch() is a Web API used to fetch remote resources and returns a promise. React extends
fetch to provide automatic request deduping, and Next.js extends the
fetch options object to allow each request to set its own caching and revalidating rules.
To see how
fetch and async components work together, see the Data Fetching page.
React will automatically cache
fetch requests with the same input in a temporary cache. This is an optimization to avoid the same data being fetched more than once during a rendering pass - and is especially useful when multiple components need to fetch the same data.
For example, you might fetch the current user in multiple components in a tree that spans across nested layouts. This optimization ensures that it's not only safe but encouraged to fetch data in the component where it's used.
In cases where you're not able to use
fetch, React provides a
cache function to allow you to manually cache data for the duration of the request. Learn more about
In Next.js, there are two types of data: Static and Dynamic.
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:
However, there are some cases where you want to fetch the latest data. Next.js supports this by allowing you to mark requests as dynamic. This means that the data will be fetched at request time and not cached.
To learn more about the static and dynamic data fetches, see the Data Fetching page.
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 and be served up faster.
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.
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.
Next.js provides two types of revalidation:
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 in Next.js, 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.