--- title: How to Configure the Cache-Control Response Header in Vercel Projects description: After reviewing this guide, you will be able to set a cache-control header of any value to be returned when a specific page of your deployment is requested. url: /kb/guide/how-to-configure-the-cache-control-response-header-in-vercel-projects canonical_url: "https://vercel.com/kb/guide/how-to-configure-the-cache-control-response-header-in-vercel-projects" published: 2025-11-03 last_updated: 2026-06-16 authors: Ismael Rumzan related: - /docs/concepts/edge-network/headers - /docs/concepts/next.js/incremental-static-regeneration - /docs/concepts/projects/overview - /docs/concepts/deployments/configure-a-build - /docs/project-configuration - /docs/functions install_vercel_plugin: npx plugins add vercel/vercel-plugin --- ## Related pages > **For AI agents:** Follow these links to understand how this page connects to the rest of the Vercel ecosystem. For the full cross-link map (inbound, outbound, prerequisites, and semantic neighbors), see the .graph.md link below. - [Cache-Control headers](https://vercel.com/docs/caching/cache-control-headers?from=related&source_path=%2Fkb%2Fguide%2Fhow-to-configure-the-cache-control-response-header-in-vercel-projects&source_site=vercel-kb&relationship=related) — Learn about the cache-control headers sent to each Vercel deployment and how to use them to control the caching behavior - [Vercel CDN Cache](https://vercel.com/docs/caching/cdn-cache?from=related&source_path=%2Fkb%2Fguide%2Fhow-to-configure-the-cache-control-response-header-in-vercel-projects&source_site=vercel-kb&relationship=related) — Learn how Vercel's CDN cache stores your content across a global network to reduce latency and origin load. - [Response headers](https://vercel.com/docs/headers/response-headers?from=related&source_path=%2Fkb%2Fguide%2Fhow-to-configure-the-cache-control-response-header-in-vercel-projects&source_site=vercel-kb&relationship=related) — Learn about the response headers sent to each Vercel deployment and how to use them to process responses before sending - [Data Cache for Next.js](https://vercel.com/docs/caching/runtime-cache/data-cache?from=related&source_path=%2Fkb%2Fguide%2Fhow-to-configure-the-cache-control-response-header-in-vercel-projects&source_site=vercel-kb&relationship=related) — Vercel Data Cache is a specialized cache that stores responses from data fetches in Next.js App Router - [Caching](https://vercel.com/docs/caching?from=related&source_path=%2Fkb%2Fguide%2Fhow-to-configure-the-cache-control-response-header-in-vercel-projects&source_site=vercel-kb&relationship=related) — Learn how Vercel caches content across multiple layers to deliver fast responses and reduce load on your backend. - [Vercel Data Cache: A progressive cache, integrated with Next.js](https://vercel.com/blog/vercel-cache-api-nextjs-cache?from=related&source_path=%2Fkb%2Fguide%2Fhow-to-configure-the-cache-control-response-header-in-vercel-projects&source_site=vercel-kb&relationship=related) - [Set cache control headers for functions](https://vercel.com/kb/guide/set-cache-control-headers?from=related&source_path=%2Fkb%2Fguide%2Fhow-to-configure-the-cache-control-response-header-in-vercel-projects&source_site=vercel-kb&relationship=related) — Learn how to set headers to cache your function's responses. - [Manage cache tags for external origins](https://vercel.com/kb/guide/how-to-manage-cache-tags-for-external-origins?from=related&source_path=%2Fkb%2Fguide%2Fhow-to-configure-the-cache-control-response-header-in-vercel-projects&source_site=vercel-kb&relationship=related) — Learn how to use cache tags to optimally serve fresh content on Vercel when content from your external origin changes - [Migrate to Vercel from Netlify](https://vercel.com/kb/guide/migrate-to-vercel-from-netlify?from=related&source_path=%2Fkb%2Fguide%2Fhow-to-configure-the-cache-control-response-header-in-vercel-projects&source_site=vercel-kb&relationship=related) — Migrate your website's configuration from Netlify to Vercel - [Using Vercel as a Standalone CDN](https://vercel.com/kb/guide/using_vercel_as_a_cdn?from=related&source_path=%2Fkb%2Fguide%2Fhow-to-configure-the-cache-control-response-header-in-vercel-projects&source_site=vercel-kb&relationship=related) — Use Vercel's external rewrites to proxy and cache content from external websites or APIs through Vercel's global edge ne - [How to enable CORS on Vercel](https://vercel.com/kb/guide/how-to-enable-cors?from=related&source_path=%2Fkb%2Fguide%2Fhow-to-configure-the-cache-control-response-header-in-vercel-projects&source_site=vercel-kb&relationship=related) — Learn how to enable CORS on Vercel with vercel.json, Routing Middleware, framework config, and route handlers, plus how Full cross-link map for this page: [/kb/guide/how-to-configure-the-cache-control-response-header-in-vercel-projects.graph.md](/kb/guide/how-to-configure-the-cache-control-response-header-in-vercel-projects.graph.md?from=related&source_path=%2Fkb%2Fguide%2Fhow-to-configure-the-cache-control-response-header-in-vercel-projects&source_site=vercel-kb&relationship=graph) Sometimes, you may need to change the [default value](https://vercel.com/docs/concepts/edge-network/headers#cache-control) of the `Cache-Control` response header returned when a page of your deployment is requested. An example of that is when you want to set up [Incremental Static Regeneration](https://vercel.com/docs/concepts/next.js/incremental-static-regeneration) and you are **not** using `Next.js`. If you are using `Next.js`, it is recommended to use `getStaticProps` as explained [here](https://nextjs.org/docs/basic-features/data-fetching/incremental-static-regeneration). ## Overview Before you get started, you should have: - A Vercel [Project](https://vercel.com/docs/concepts/projects/overview) deployed with at least one front-end page accessible using the [framework](https://vercel.com/docs/concepts/deployments/configure-a-build#framework-preset) of your choice. - An understanding of configuring your project with a [vercel.json file](https://vercel.com/docs/project-configuration) or a [next.config.js file](https://nextjs.org/docs/api-reference/next.config.js/introduction). - An understanding of [Vercel Functions](https://vercel.com/docs/functions). Let's say you have a page in your deployment called `about`. When this page is requested at `yoursite.com/about`, you would like to return the `Cache-Control` header with value `s-maxage=1, stale-while-revalidate=59` so that [Incremental Static Regeneration](https://vercel.com/docs/concepts/next.js/incremental-static-regeneration) happens on this page for all subsequent requests based on the specified `stale-while-revalidate` value. This guide shows three different methods of setting this `Cache-Control` header value on the about page. ## Using the `vercel.json` file This applies if your project is **not** based on `Next.js`. Add the following code to your [vercel.json file](https://vercel.com/docs/project-configuration). ```javascript { "headers": [ { "source": "/about.js", "headers": [ { "key": "Cache-Control", "value": "s-maxage=1, stale-while-revalidate=59" } ] } ] } ``` Next, deploy your project and go to `yoursite.com/about` in your web browser. Finally, inspect the Network tab in the developer tools to view the response headers for this page and look for the `Cache-Control` value. > \*\*NOTE: \*\*You can also use the `curl` command to get the response headers from the command line by running the following command: ```bash curl -v https://yoursite.com/about ``` ## Using the `next.config.js` file This applies if your project uses `Next.js` Add the following code to your [next.config.js file](https://nextjs.org/docs/api-reference/next.config.js/introduction). ```javascript /** @type {import('next').NextConfig} */ const nextConfig = { reactStrictMode: true, async headers() { return [ { source: "/about", headers: [ { key: "Cache-Control", value: "s-maxage=1, stale-while-revalidate=59", }, ], }, ]; }, }; module.exports = nextConfig; ``` Next, deploy your project and go to `yoursite.com/about` in your web browser. Finally, inspect the Network tab in the developer tools to view the response headers for this page and look for the `Cache-Control` value. You can also use the `curl` command as explained above. ## Using Vercel Functions This applies if your project uses a Vercel Function to return the response. - Create an API route. For example, in a Next.js App Router project, create `app/api/about/route.js`. - Add the following code to your route file: ```javascript export async function GET() { return Response.json( { name: 'Mary Lamb' }, { status: 200, headers: { 'Cache-Control': 's-maxage=1, stale-while-revalidate=59', }, }, ); } ``` - Deploy your project and request the API route in your web browser. - Inspect the Network tab in the developer tools to view the response headers for this route and look for the `Cache-Control` value. You can also use the `curl` command as explained above.