Data Fetching

Good to know:

This new data fetching model is currently being developed by the React team. We recommend reading the support for promises React RFC which introduces async and await in Server Components and a new use() hook for Client Components.

While you can try it out, it is not yet stable. We'll keep these docs updated to reflect the latest developments.

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.

`async` and `await` in Server Components

With the proposed React RFC, you can use async and await to fetch data in Server Components.

app/page.tsx

async function getData() {
  const res = await fetch('https://api.example.com/...');
  // The return value is *not* serialized
  // You can return Date, Map, Set, etc.

  // Recommendation: handle errors
  if (!res.ok) {
    // This will activate the closest `error.js` Error Boundary
    throw new Error('Failed to fetch data');
  }

  return res.json();
}

export default async function Page() {
  const data = await getData();

  return <main></main>;
}

Server Component Functions

Next.js provides helpful server functions you may need when fetching data in Server Components:

use is a new React function that accepts a promise conceptually similar to await. use handles the promise returned by a function in a way that is compatible with components, hooks, and Suspense. Learn more about use in the React RFC.

Wrapping fetch in use is currently not recommended in Client Components and may trigger multiple re-renders. For now, if you need to fetch data in a Client Component, we recommend using a third-party library such as SWR or React Query.

Note: We'll be adding more examples once fetch and use work in Client Components.

Static Data Fetching

By default, fetch will automatically fetch and cache data indefinitely.

fetch('https://...'); // cache: 'force-cache' is the default

Revalidating Data

To revalidate cached data at a timed interval, you can use the next.revalidate option in fetch() to set the cache lifetime of a resource (in seconds).

fetch('https://...', { next: { revalidate: 10 } });

See Revalidating Data for more information.

NOTE: Caching at the fetch level via revalidate or cache: 'force-cache' stores the data across requests in a shared cache. You should avoid using it for user specific data (i.e. requests that derive data from cookies() or headers())

Dynamic Data Fetching

To fetch fresh data on every fetch request, use the cache: 'no-store' option.

fetch('https://...', { cache: 'no-store' });

Data Fetching without `fetch()`

Default Caching Behavior

Any data fetching libraries that do not use fetch directly will not affect caching of a route, and will be static or dynamic depending on the route segment.

If the segment is static (default), the output of the request will be cached and revalidated (if configured) alongside the rest of the segment. If the segment is dynamic, the output of the request will not be cached and will be re-fetched on every request when the segment is rendered.

Good to know: Dynamic functions like cookies() and headers() will make the route segment dynamic.

Segment Cache Configuration

As a temporary solution, until the caching behavior of third-party queries can be configured, you can use segment configuration to customize the cache behavior of the entire segment.

app/page.tsx

import prisma from './lib/prisma';

export const revalidate = 3600; // revalidate every hour

async function getPosts() {
  const posts = await prisma.post.findMany();
  return posts;
}

export default async function Page() {
  const posts = await getPosts();
  // ...
}