I'm trying to customize the Cache-Control
headers with which my NextJS server responds when serving pages that were generated at build time (SSG). The rationale is simple: given that every server response is cached by the CDN according to its headers, and given that I want every static page to be refreshed as soon as I roll out a new deploy, the default caching policy (s-maxage=31536000, stale-while-revalidate
, source) doesn't cut it for me.
The revalidate
option, if set to 1
(0
throws a build error), would get very close to the intended behavior, but it would have the unfortunate side effect of regenerating the page at most once every second. As stated above, the page is strictly static, so server-rendering it 60 times a minute would only be a waste of resources.
export const getStaticProps: GetStaticProps<
EntityProps,
EntityPathParams
> = async (context) => {
const id = context.params.id;
const entity = getEntity(id);
// Activates ISR--waste of resources
return { props: entity, revalidate: 1 };
};
It should be noted that the Cache-Control
headers one sets in their next.config.js
are very "helpfully" overridden in production, so this is not a feasible solution.
module.exports = {
// ...
async headers() {
return [
// Overridden in production
{
source: '/entity/:path',
headers: [
{
key: 'Cache-Control',
value: 'public, max-age=0, must-revalidate',
},
],
},
];
},
};
I don't see any way to customize the headers at this point. Am I mistaken? Can you point me to some additional resources? Do you know any alternative approach?