I'm currently exploring ways to tailor the Cache-Control headers for my NextJS server when delivering pages generated at build time (SSG). The objective is straightforward: since every CDN caches server responses based on their headers, and I want static pages to update immediately upon a new deployment, the existing caching policy (
s-maxage=31536000, stale-while-revalidateThe revalidate option, if configured as 1 (0 triggers a build error), almost aligns with the desired behavior. However, it has the drawback of potentially regenerating the page only once per second. Given that the page is completely static, frequently server-side rendering it would be inefficient.
export const getStaticProps: GetStaticProps<
EntityProps,
EntityPathParams
> = async (context) => {
const id = context.params.id;
const entity = getEntity(id);
// Activates ISR--inefficient resource utilization
return { props: entity, revalidate: 1 };
};
It's important to mention that the Cache-Control headers specified in the next.config.js file are unhelpfully overridden in production, rendering that approach impractical.
module.exports = {
// ...
async headers() {
return [
// Overridden in production
{
source: '/entity/:path',
headers: [
{
key: 'Cache-Control',
value: 'public, max-age=0, must-revalidate',
},
],
},
];
},
};
At this juncture, I haven't found a method to customize the headers. Is there something I overlooked? Could you suggest additional references or alternative strategies?