# Data Cache for Next.js

The Vercel Data Cache is a specialized, granular cache that was introduced with Next.js 13 for storing [segment-level data](https://nextjs.org/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating) while using [Next.js App Router](/docs/frameworks/nextjs).

When using [Next.js caching APIs](https://nextjs.org/docs/app/getting-started/caching-and-revalidating) such as `fetch` or `unstable_cache`, Vercel automatically scaffolds globally distributed infrastructure for you with no additional configuration.

## Features

- **Globally available, regional cache**: Every region in which your function runs has an independent cache, so any data used in server side rendering or Next.js route handlers is cached close to where the function executes.
- **Time-based revalidation**: All cached data can define a revalidation interval, after which the data will be marked as stale, triggering a re-fetch from origin.
- **On-demand revalidation**: Any data can be triggered for revalidation on-demand, regardless of the revalidation interval. The revalidation propagates to all regions within 300ms.
- **Tag based revalidation**: Next.js allows associating tags with data, which can be used to revalidate all data with the same tag at once with [`revalidateTag`](https://nextjs.org/docs/app/api-reference/functions/revalidateTag). For example, you can revalidate all responses from a CMS with the same author ID tag.

## Comparing with ISR and Vercel CDN Cache

Next.js combines Vercel Data Cache with [Incremental Static Regeneration](/docs/incremental-static-regeneration) (ISR) to provide an optimized caching infrastructure for your pages.

When a page contains *entirely static data*, Vercel uses ISR to generate the whole page. However, when a page contains a *mix of static and dynamic data*, the dynamic data is re-fetched when rendering the page. In this scenario, Vercel Data Cache is used to cache the static part of the data to avoid slow origin fetches.

Both ISR and Vercel Data Cache support time-based revalidation, on-demand revalidation, and tag based revalidation.

[Vercel's Cache](/docs/cdn-cache) is used for caching entire static assets on the CDN, such as images, fonts, and JavaScript bundles. The Vercel Data Cache is used for caching data fetched during a function's execution, such as API responses.

## Managing Data Cache

When you deploy a Next.js project that uses [App Router](https://nextjs.org/docs/app) to Vercel, the Vercel Data Cache is automatically enabled to cache [segment-level data](https://nextjs.org/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating) alongside ISR in the app router.

### Observing your Data Cache usage

You can observe your project's Data Cache usage using the [**Observability**](https://vercel.com/d?to=%2F%5Bteam%5D%2F%7E%2Fobservability\&title=Try+Observability) tab under your project in the Vercel dashboard. The Runtime Cache tab provides visibility into what's stored in your project's Data Cache along with insights like your cache hit rate and the number of cache reads, cache writes, and on-demand revalidations.
To view your usage for Data Cache:

You can also track Data Cache usage per request in the [**Logs**](https://vercel.com/d?to=%2F%5Bteam%5D%2F%5Bproject%5D%2Flogs\&title=Logs+tab) tab under the log's request metrics section.

### Manually purging Data Cache

In some circumstances, you may need to delete all cached data and force revalidation. You can do this by purging the Data Cache:

1. Under your project, go to the
   **Settings** tab.
2. In the left sidebar, select **Caches**.
3. In the **Data Cache** section, click **Purge Data Cache**.
4. In the dialog, confirm that you wish to delete and click the **Continue & Purge Data Cache** button.

Purging your Data Cache will create a temporary increase in request times for users as new data needs to be refetched.

## Using Data Cache examples

These examples use the [Next.js App Router](https://nextjs.org/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating).

### Time-based revalidation

```ts v0="build" filename="app/page.tsx" framework=nextjs
type BlogPosts = Awaited<ReturnType<typeof getStaticProps>>['props']['blog'];

export default function Page({ blog }: { blog: BlogPosts }) {
  return (
    <main>
      <pre>{JSON.stringify(blog, null, 2)}</pre>
    </main>
  );
}

export async function getStaticProps() {
  const res = await fetch('https://api.vercel.app/blog');
  const blog = await res.json();

  return {
    props: {
      blog,
    },
    revalidate: 3600, // 1 hour
  };
}
```

```js v0="build" filename="app/page.jsx" framework=nextjs
export default function Page({ blog }) {
  return (
    <main>
      <pre>{JSON.stringify(blog, null, 2)}</pre>
    </main>
  );
}

export async function getStaticProps() {
  const res = await fetch('https://api.vercel.app/blog');
  const blog = await res.json();

  return {
    props: {
      blog,
    },
    revalidate: 3600, // 1 hour
  };
}
```

```ts v0="build" filename="app/page.tsx" framework=nextjs-app
export default async function Page() {
  const res = await fetch('https://api.vercel.app/blog', {
    next: {
      revalidate: 3600, // 1 hour
    },
  });
  const data = await res.json();

  return (
    <main>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </main>
  );
}
```

```js v0="build" filename="app/page.jsx" framework=nextjs-app
export default async function Page() {
  const res = await fetch('https://api.vercel.app/blog', {
    next: {
      revalidate: 3600, // 1 hour
    },
  });
  const data = await res.json();

  return (
    <main>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </main>
  );
}
```

### Tag-based revalidation

```ts v0="build" filename="app/page.tsx" framework=all
export default async function Page() {
  const res = await fetch('https://api.vercel.app/blog', {
    next: {
      tags: ['blog'], // Invalidate with revalidateTag('blog') on-demand
    },
  });
  const data = await res.json();

  return '...';
}
```

```js v0="build" filename="app/page.jsx" framework=all
export default async function Page() {
  const res = await fetch('https://api.vercel.app/blog', {
    next: {
      tags: ['blog'], // Invalidate with revalidateTag('blog') on-demand
    },
  });
  const data = await res.json();

  return '...';
}
```

```ts v0="build" filename="app/actions.ts" framework=all
'use server';

import { revalidateTag } from 'next/cache';

export default async function action() {
  revalidateTag('blog');
}
```

```js v0="build" filename="app/actions.js" framework=all
'use server';

import { revalidateTag } from 'next/cache';

export default async function action() {
  revalidateTag('blog');
}
```

## Revalidation behavior

The Vercel Data Cache infrastructure isolates cached data per Vercel project and [deployment environment](/docs/deployments/environments) (`production` or `preview`).

Vercel persists cached data across deployments, unless you explicitly invalidate it using framework api's like `res.revalidate`, `revalidateTag` and `revalidatePath`, or by [manually purging Vercel CDN Cache](/docs/cdn-cache#manually-purging-vercel-cdn-cache). It is **not** updated at build time. When invalidated, Vercel updates the data at run time, triggered by the next request to the invalidated path.

When the system triggers a revalidation, Vercel marks the corresponding path or cache tag as stale in every Vercel CDN region. The next request to that path or tag, regardless of the region, initiates revalidation and updates the cache globally. Vercel purges and updates the regional cache in all regions within 300ms.

## Limits

| Data Cache property | Limit                               |
| ------------------- | ----------------------------------- |
| Item size           | 2 MB (items larger won't be cached) |
| Tags per item       | 128 tags                            |
| Maximum tag length  | 256 bytes                           |

## More resources

- [Explore Vercel regions](/docs/regions)
- [Next.js App Router template](/templates/next.js/app-directory)
- [Usage of Data Cache with ISR](/docs/data-cache#comparing-with-isr-and-vercel-cache)
- [Learn how Data Cache works in Next.js](https://nextjs.org/docs/app/deep-dive/caching#data-cache)


--------------------------------------------------------------------------------
title: "Build Settings"
description: "Learn how to configure the Build & Development settings for your Vercel Deploy Button."
last_updated: "2026-02-03T02:58:40.000Z"
source: "https://vercel.com/docs/deploy-button/build-settings"
--------------------------------------------------------------------------------