POST + Fetch + Caching: Can I add HTTP response headers to prevent response caching?

[ljwagerfield]

Summary

---

Is there an HTTP response header I can set to prevent Next.js's Fetch from caching POST requests?

---

For those who are unfamiliar with Next.js's Fetch implementation, it currently caches POST requests:

fetch requests that use the POST method are also automatically cached.

source: https://nextjs.org/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating#caching-data

There are several client-side approaches to opt-out of caching.

---

Background: This is currently causing a few issues with our SDKs, since they're not expecting POST requests to be cached, and if there's an HTTP response header we can set, then we can instantly solve this problem for all our users who are using Next.js.

[icyJoseph]

Maybe this? https://nextjs.org/docs/app/building-your-application/caching#opting-out

[icyJoseph]

Oh, well not client side necessarily, you can also add a signal server side.

I had miss-understood that you want Next.js to honour, a potential header included in the response. I can't seem to remember anything like that. Most techniques are to be done within Next.js' domain. Such as force-dynamic, or no-cache etc.

I think one thing that should be clear is that, fetch request done from the browser, won't be cached.

By default, Next.js automatically caches the returned values of fetch in the Data Cache on the server.

So, if these POST requests you are talking about, originate from the Browser, then you don't need to do anything besides not setting cache control headers and such.

If these POST requests, originate from the Server, during on-demand rendering or pre-rendering, then, you could add a signal, use force-dynamic, no-cache, or even throw in Axios for instance, since that's a non-fetch based API, so it won't be cached by Next.js' server side cache, and it won't be bundled into the client side JavaScript either, assuming you fully encapsulate it to the Server Components.

[ljwagerfield]

For more context, we provide SDKs that make calls using Fetch. Some of our users are using these SDKs server-side in Next.js applications. As such, our SDKs break as they're following the HTTP RFC (where POST requests must not be cached by the client, i.e. the Next.js server-side code in this case).

Therefore, to fix the issue for our users, we either need to:

1. Patch our SDKs, by adding { cache: "no-store" } to the fetch requests.
2. Add an HTTP response header to our API (to prevent Next.js's fetch implementation from caching POST requests to our API).

Option 2) would be ideal, since it's an instant fix, whereas option 1) requires all users to update their SDKs.

Thanks for your responses :)

[icyJoseph]

Right, I guess this is looking more like an RFC, or issue rather.

I am not sure why they decided on:

fetch requests that use the POST method are also automatically cached. Unless it's inside a Route Handler that uses the POST method, then it will not be cached.

Perhaps caused by GraphQL using POST requests by default?

[ljwagerfield]

I'm uncertain about the motivation for deviating from the RFC in Next.js's Fetch implementation WRT to caching POST requests. You're most likely correct in that people are using POSTs to submit complex read-only queries to an API via the request body. Perhaps this is how GraphQL works? (In unfamiliar.)

The next best solution would probably be to have Next.js honor Cache-Control: no-store response headers, allowing external API developers to prevent Next.js clients from caching unsafe HTTP requests. (Maybe it already does?)

[0x33dm]

Indeed i believe there should be a way of "fetch" caching based on the response from the API?

My API knows better when the data will expire and needs the cache to be revalidated.

From my understand on Next.js app folder you need to specify the cache TTL before receiving the response from the 3rd party API?

I wonder how would be possible to implement something like this:

async function getData() {
  const res = await fetch('https://api.example.com/...')

  // sudo code
  res.setCache({ revalidate: Number(response.headers['Cache-control: max-age']) })

  return res.json()
}