Skip to content
Docs

Set cache control headers for functions

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

DX Team

By default, the CDN 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.

Copy link to headingSet caching depending on location

app/api/cache-control-headers/route.js
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',
    },
  });
}
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

Copy link to headingSame cache duration everywhere

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

app/api/cache-control-headers/route.js
export async function GET() {
  return new Response('Cache Control example', {
    status: 200,
    headers: {
      'Cache-Control': 'max-age=3600',
    },
  });
}
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',
    },
  });
}

Copy link to headingSet caching for Vercel's Cache

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

app/api/cache-control-headers/route.js
export async function GET() {
  return new Response('Cache Control example', {
    status: 200,
    headers: {
      'Vercel-CDN-Cache-Control': 'max-age=3600',
    },
  });
}
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',
    },
  });
}

Copy link to headingSet caching for all CDNs

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

app/api/cache-control-headers/route.js
export async function GET() {
  return new Response('Cache Control example', {
    status: 200,
    headers: {
      'CDN-Cache-Control': 'max-age=60',
    },
  });
}
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',
    },
  });
}

Copy link to headingMore resources

Related documentation

More Vercel Functions guides

Ready to deploy?

Start deployingTalk to an expert