How to cache POST request using Nextjs fetch function ?

[umang-goyal]

Fetch calls made using POST method are not being cached in my app. I want to avoid prop drilling. And multiple components make post request to get some data. I want to use the same cacheing mechanism that "GET" request have in Nextjs fetch function.

Attaching an example, it uses a mock api to make post request to get some random data back as response. The same call is made in Page.tsx and RandomName.tsx but we get different response. Goal is the cache the response in the first call.
eg:
https://stackblitz.com/edit/nextjs-33afry?file=app%2Fpage.tsx

[icyJoseph]

Mmm that's weird. On Server Components:

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

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.

If you are making the POST requests from the browser, then there's no caching done by Next.js

[umang-goyal]

@icyJoseph Thats why im wondering. Is there a syntax mistake or what. I tried adding { cache: "force-cache" } but no difference.

[Joost385]

Make sure your POST requests return a 200 status code. Some backend frameworks send a 201 after a POST request, which is not cached:

next.js/packages/next/src/server/lib/patch-fetch.ts

Line 590 in 561dcf6

res.status === 200 &&

[icyJoseph]

That's an assignment that's later used in combination with other stuff, to see if the request should be cached. Right?

[mxzinke]

Yes, this is used to see if the request should be cached.

Note the comment on L388-L394:

We automatically disable fetch caching under the following conditions:

• Fetch cache configs are not set. Specifically:
  • A page fetch cache mode is not set (export const fetchCache=...)
  • A fetch cache mode is not set in the fetch call (fetch(url, { cache: ... }))
• A fetch revalidate value is not set in the fetch call (fetch(url, { revalidate: ... }))
• OR the fetch comes after a configuration that triggered dynamic rendering (e.g., reading cookies()) and the fetch was considered uncacheable (e.g., POST method or has authorization headers)

So, this means POST Request are not cached on this version.

In addition, the upcoming default caching behavior changes in Next v15 does not affect this behavior (see this).

[icyJoseph]

Yes, but that's not where it ends, there's more logic further. You can still cache if you pass a cache option to fetch, etc. We have an app using graphql with POST requests and it relies on the caching.

Lots has changed back and forth.

[Joost385]

If I read the comment correctly it says that requests are not cached under the following condition:

"Fetch cache configs are not set" || ("dynamic rendering triggered" && "fetch was considered uncacheable e.g. POST")

My POST requests are definitely being cached, I am looking at a POST cache entry right now.

But just to be clear: I find the whole issue very confusing. I'm just hoping it stays like this, and my caching strategy doesn't go up in flames.

[mxzinke]

@Joost385 the autoNoCache actually tells the behavior I was mentioning, but what I was missing is that you can overwrite the auto-cache behavior with just a no-store or force-cache. That's what confused me and also that's why its named autoNoCache and not noCache. 🤦‍♂️

This behavior is kind of documented here, but it does not state about using POST + force-cache to cache POST requests. May it make sense to add this to the official documentation.

Submitted this issue about documenting this stuff: #70946

Thanks for the clarification guys! Looking forward to document it.

[mandorakannu]

Add cache: "force-cache" in fetch params.

const res = await fetch(
    'https://64e460bdc5556380291319c6.mockapi.io/business',
    {
      method: 'post',
      body: JSON.stringify({ test: 'test' }),
      headers: {
        accept: 'application/json',
        'content-type': 'application/json',
      },
      cache: 'force-cache',
    }
  );

[Dragate]

What I'm wondering and can't seem to find in the documentation is how the cache key from a fetch request is generated. Is it just the url? Does it include the method? Does it include the headers? Does it include the body of the request? Does it account for next.tags?

In my case I want to cache some POST requests to an external service. They all share the same url and header (an API key) but differ on their request body. I want them to share the same cache only if their request url, method, headers & body are the same but I'm unsure if just setting a revalidate timer would achieve the expected result.

[icyJoseph]

• https://github.com/vercel/next.js/blob/canary/packages%2Fnext%2Fsrc%2Fserver%2Flib%2Fincremental-cache%2Findex.ts#L249-L253

[Dragate]

Oh wow, it does take into account for most stuff. That's perfect. Thank you!