How can I disable cache on a specific page only in Next.JS

user_3192151 0
Viewed 8341

I'm running a job aggregator and I wish to avoid cache on my post feed, since its showing outdated results to my users. We're running on Next.JS.

I've searched through their docs, but didn't find a way about how to do it...

Does someone have an idea?

I assume its on next.config.js, but I don't know exactly how.

next.js reactjs
3 Answers

This seems work if server-side rendering

Page.getInitialProps = async ({ store, res }) => {
    if (res) {
        // res available only at server
        // no-store disable bfCache for any browser. So your HTML will not be cached
        res.setHeader('Cache-Control', 'no-store');
    }

    await store.dispatch(action());
    return {};
};
user_15199460

Late to the party, however it seems, disabling the ETag should do the trick. Have you tried that!

generateEtags: false,

Read more on the same topic here. NBaua

user_19260130

Via next.config.js

Set the header no-cache on the path that you want.

module.exports = {
  headers: () => [
    {
      source: '/:path*',
      headers: [
        {
          key: 'Cache-Control',
          value: 'no-store',
        },
      ],
    },
  ],
}

Docs: NextJS Header Overriding Behavior

user_70436230
Related