Skip to main content

Setting Cache-Control Headers

Before You Begin

This guide explains the how to set Cache-Control headers using @pantheon-systems/wordpress-kit in the next-wordpress-starter, or any Next.js application using the wordpress-kit.

Setting Cache-Control Headers with WordPress Kit

The @pantheon-systems/wordpress-kit npm package exports a function, setEdgeHeader, which takes in a response object and a cache-control header value. The value is then set to the response object's headers so that when the request is sent along it will be cached at the edge.

The default cache-control header is the following:

Cache-Control: public, s-maxage=600

To override the default, you may pass in your own cache-control header:

import { setEdgeHeader } from '@pantheon-systems/wordpress-kit';

export default function MyPage(props) {
// Page component here...

export async function getServerSideProps(context) {
// the response object from the server context
const { res } = context;

// setEdgeHeader accepts an optional string which is a cache-control header
const myCacheControlHeader = 'public, max-age=604800, must-revalidate';

// Call setEdgeHeader with the res object and your desired cache-control header
setEdgeHeader({ res, cacheControl: myCacheControlHeader });

// Fetch data and return props...

In Production

Depending on where you deploy, these headers may or may not be respected with regards to caching at the edge. See your platform's documentation to verify.