# How to Configure the Cache-Control Response Header in Vercel Projects

**Author:** Ismael Rumzan

---

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).

`{ "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: `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).

`/** @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:
  

`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.

---

[View full KB sitemap](/kb/sitemap.md)