← Back to Recipes

Set cache control headers for functions

Learn how to set headers to cache your function's responses.
Table of Contents
Next.js (/app)

By default, the Edge Network and browser will not cache, unless you set the following headers in your function as needed: Cache-Control,CDN-Cache-Control, and Vercel-CDN-Cache-Contol. You can set these headers to:

Setting the cache in functions takes priority over config files.

Set caching depending on location

Next.js (/app)
Next.js (/pages)
Other frameworks
app/api/cache-control-headers/route.ts
export async function GET() {
  return new Response('Cache Control example', {
    status: 200,
    headers: {
      'Cache-Control': 'max-age=10',
      'CDN-Cache-Control': 'max-age=60',
      'Vercel-CDN-Cache-Control': 'max-age=3600',
    },
  });
}

Vercel uses the following priority when you specify multiple cache control headers:

  • Vercel-CDN-Cache-Control
  • CDN-Cache-Control
  • Cache-Control

Same cache duration everywhere

This sets the same maximum cache duration for Vercel, CDNs, and the client:

Next.js (/app)
Next.js (/pages)
Other frameworks
app/api/cache-control-headers/route.ts
export async function GET() {
  return new Response('Cache Control example', {
    status: 200,
    headers: {
      'Cache-Control': 'max-age=3600',
    },
  });
}

Set caching for Vercel's Edge Cache

This sets the maximum cache duration for Vercel's Edge Cache only.

Next.js (/app)
Next.js (/pages)
Other frameworks
app/api/cache-control-headers/route.ts
export async function GET() {
  return new Response('Cache Control example', {
    status: 200,
    headers: {
      'Vercel-CDN-Cache-Control': 'max-age=3600',
    },
  });
}

Set caching for all CDNs

This sets the cache duration on Vercel and also on other CDNs

Next.js (/app)
Next.js (/pages)
Other frameworks
app/api/cache-control-headers/route.ts
export async function GET() {
  return new Response('Cache Control example', {
    status: 200,
    headers: {
      'CDN-Cache-Control': 'max-age=60',
    },
  });
}

Related

Caching Headers

Information on Vercel's caching header.

Edge Cache

Learn about Vercel's Edge Cache

ISR

ISR is another option for caching globally.

Last updated on May 3, 2024