Vercel Data Cache

The Vercel Data Cache is a specialized, granular cache for storing responses from fetches while using modern frontend frameworks like Next.js.

Frameworks that integrate with the Data Cache (currently Next.js) are able to cache data per fetch instead of per route. This means you can have static, dynamic, and revalidated data together in the same route.

With Vercel, you write application code, like component-level data fetching with fetch, and we scaffold globally distributed infrastructure for you with no additional effort. See our examples to learn how to implement this.

Vercel Data Cache is a shared cache, meaning users of the same project share the same cache.

• Ephemeral, globally available, regional cache: Every region in which your serverless or edge 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. For example, you could use this to revalidate all responses from a CMS with the same author ID tag.

Next.js combines Vercel Data Cache with Incremental Static Regeneration (ISR) to provide optimized caching infrastructure for your pages.

When a page contains entirely static data, Vercel will using ISR to generate the whole page. However, when a page contains a mix of static and dynamic data, the dynamic data needs to be re-fetched when rendering the page. In this scenario, Vercel Data Cache is used to cache the static 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 Edge Cache is used for caching entire static assets at the edge, 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.

When you deploy a Next.js 13 project that uses App Router to Vercel, the Vercel Data Cache is automatically enabled to cache segment-level data alongside ISR in the app router.

To learn more about managing your Data Cache, including disabling it, and purging the cache, see Managing Data Cache.

Regardless of where you are deploying, sensitive data that Next.js can infer (such as Authorization headers) are not cached by default. However, any request can still opt into caching and override these defaults. We recommend adding the appropriate headers to sensitive requests to ensure data is never accidentally cached.

These examples use Next.js 13 with App Router:

export default async function Page() {
  // Since we are using dynamic data, we can not prerender (ISR) the full page
  const dynamicData = await fetch('api.example.com/dynamic', {
    cache: 'no-store',
  }).then((res) => res.text());
 
  // However, we can leverage the Vercel Data Cache to cache the static data and avoid slow origin fetches
  const staticData = await fetch('api.example.com/static', {
    next: {
      // The data will be revalidated every 3600 seconds (1 hour)
      revalidate: 3600,
    },
  }).then((res) => res.text());
 
  return <p>{dynamicData + staticData}</p>;
}

export default async function Page() {
  // Since we are using dynamic data, we can not prerender (ISR) the full page
  const dynamicData = await fetch('api.example.com/dynamic', {
    cache: 'no-store',
  }).then((res) => res.text());
 
  // However, we can leverage the Vercel Data Cache to cache the static data and avoid slow origin fetches
  const staticData = await fetch('api.example.com/static', {
    next: {
      // The data will never be revalidated automatically, but can be invalidated on-demand via tags
      tags: ['tag1'],
    },
  }).then((res) => res.text());
 
  return <p>{dynamicData + staticData}</p>;
}

import { NextRequest } from 'next/server';
import { revalidateTag } from 'next/cache';
 
// Triggers a revalidation of the static data in the example above
export async function POST(req: NextRequest) {
  // revalidateTag works even if the page uses full ISR, meaning no dynamic data
  await revalidateTag('tag1');
  return new Response('{"success": true}');
}

For information, see the Limits and pricing doc.