Question

24

How to enable cache for getServerSideProps?

rated 0 times [ 28] [ 4] / answers: 1 / hits: 6686 / 2 Years ago, thu, march 3, 2022, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

tayaw

Add To Favorites

Follow

Total Points: 749

Total Questions: 88

Total Answers: 86

Location: Djibouti

Member since Sun, Feb 27, 2022

2 Years ago

tayaw questions

1 navigator.clipboard.readText() is not working in Firefox

Fri, May 7, 21, 00:00, 3 Years ago

1 Vuetify form .$refs validate is not a function

Wed, Oct 7, 20, 00:00, 4 Years ago

1 Using absolute position to place image above another image using Tailwind CSS

Sun, Sep 6, 20, 00:00, 4 Years ago

1 How to make div tag clickable with Link from react-router-dom?

Wed, Jun 17, 20, 00:00, 4 Years ago

1 Bypassing the NSFW warning page using random-puppy and discord.js v12?

Mon, May 25, 20, 00:00, 4 Years ago

View All

answered 2 Years ago lizette · Accepted Answer

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.