Sometimes, you may need to change the default value 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 and you are not using Next.js
. If you are using Next.js
, it is recommended to use getStaticProps
as explained here.
Overview
Before you get started, you should have:
- A Vercel Project deployed with at least one front-end page accessible using the framework of your choice.
- An understanding of configuring your project with a
vercel.json
file or anext.config.js
file. - An understanding of Edge 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 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.
{ "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.
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.
/** @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 Edge Functions
This applies if your project uses the latest version of Next.js
.
- Create a folder called
about
insidepages/
. - Move your
about.js
file to theabout
folder and rename it toindex.js
. - Add a new file called
handler.js
in the/pages/api
folder. - Add the following code to your
handler.js
file:
import { NextResponse } from 'next/server';
export const config = { runtime: 'edge',};
export default async function handler(req) { return NextResponse.json( { name: 'Mary Lamb' }, { status: 200, headers: { 'Cache-Control': 's-maxage=1, stale-while-revalidate=59', }, }, );}
- Deploy your project and go to
yoursite.com/about
in your web browser. - 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.