How to enable cache for getServerSideProps?

user_2655590 0
Viewed 1399

We have few pages and components as server side rendering.

We were trying to use cache for few API responses.

export async function getServerSideProps(context) {
   const res = await getRequest(API.home)
   return {
     props: {
       "home": res?.data?.result
     },
   }
}

Next.js version is 11.1.

Here can someone please suggest how can we implement cache?

server-side-rendering next.js javascript
1 Answers

You can set the Cache-Control header inside getServerSideProps using res.setHeader.

export async function getServerSideProps(context) {
    // Add whatever `Cache-Control` value you want here
    context.res.setHeader(
        'Cache-Control',
        'public, s-maxage=10, stale-while-revalidate=59'
    )
    const res = await getRequest(API.home)
    return {
        props: {
            home: res?.data?.result
        }
    }
}

Setting a Cache-Control value only works in production mode, as the header will be overwritten in development mode.

See Caching with Server-Side Rendering documentation for more details.

user_18707800
Related