← Back to Guides

Set cache control headers for functions

Learn how to set headers to cache your function's responses.

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

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:

Same cache duration everywhere

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

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.

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

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 16, 2024