How to avoid caching for specific Nextjs API route?

Question

I have nextjs api route /api/auth/signout, it basically just clears the specific cookie and send JSON back.

The problem is, when I deploy project in Vercel, this particular API working first time properly (cookie cleared and giving 200 response) but later it's not working (cookie not cleared and giving 304 response).

I want to know, is there any way to avoid cache only for this route?

What's the best possible way to fix this problem?

Lune

Answer 1

Added this config on next.config.js

async headers() {
    return [
      {
        source: '/api/<route-name>',
        headers: [
          {
            key: 'Cache-Control',
            value: 'no-store, max-age=0',
          },
        ],
      },
    ];
  },

Lune

There's a warning against this here: nextjs.org/docs/api-reference/next.config.js/… "You cannot set Cache-Control headers in next.config.js file as these will be overwritten in production to ensure that API Routes and static assets are cached effectively." – Runic

Hi @AndreVitorio, thanks for the comment, if add 'cache-control' header in api route file will that only effect that particular route, or for all routes? – Lune

Hey @Shiva, I'm not sure but I believe only the specified route would be affected. – Runic

Answer 2

Had a very similar problem with a corn API route and fixed it with

export const revalidate = 0;

in the route.js file

Heigho

nextjs.org/docs/app/api-reference/functions/fetch#optionscache no-store is important if using nextjs fetch – Murielmurielle

Answer 3

You can configure Cache-Control header per API endpoint

https://nextjs.org/docs/api-reference/next.config.js/headers#cache-control

In your case, something like this might do the trick:

res.setHeader('Cache-Control', 'no-store')

Tung

Answer 4

This is more of an answer to your use-case rather than the title of the question:

I think you should view the signout http endpoint as one that has a side-effect i.e. the destruction of a user session (even though nothing may be happening server-side). For http endpoints that have side-effects, it’s recommended to call them with the appropriate http method that implies that a side-effect will occur e.g. DELETE would be good in this case. By way of the http spec, responses to http DELETE requests shouldn’t be cached.

Earwax