Fetch caching in Server actions

[fuma-nama]

I am using the @upstash/kafka package in a server action:

"use server";

import { kafka } from "@/utils/kafka";

export async function createMessage() {
    console.log("action");

    await kafka.producer().produce("send_message", { name: "Test" });
}

However, since it uses fetch under the hood, the request is cached and no more messages will be produced by clicking the button again.
I had read all the documentation about Server Actions and Data Fetching, but none of them answer my question.
Defining fetchCache and revalidate properties at the page level doesn't work for server action (Test in CodeSandbox).

I am wondering if there is something like:

"use server";

//disable caching
export const revalidate = 0;

export function myAction() { ... }

[andrei-zgirvaci]

I am very supprised there hasn't been any response to this discussion since May. I am experiencing the exact same problem. Will probably go back to using regular API routes for now...

[romeobravo]

I just encountered the same issue using Drizzle with the neon serverless connection. The caching docs do not go into detail into how to disable caching for Server Actions specifically but it seems using cookies() works.

export async function signIn(formData: FormData) {
  // disable cache for this server action
  const _cookies = cookies()

  // library calls using fetch
}

This 'magic' approach to caching at the cost of predictability really needs some work in my opinion.

[hala94]

I was aware of the "magic caching" approach + aware that usage of cookies will opt out, but this still caught me off guard.

Had the same setup with Neon+Drizzle in a server action, the funny thing is that I've already used cookies in my server action but only .set() and .delete() methods, which were still causing internal Neon calls to be cached -wat?

Only when explicitly read at the top of the action const _ = cookies(), it started working.

Really poor predictability.

[RicFer01]

Can someone explain me please, which kind of cache is removing const _ = cookies()?

I had a problem submitting a form with the server action, it was removed a field in the external server, but the action it was somehow like remembering the previous state, like if the field was still there, super strange. With this magic instruction, it's now okay, but I'd like to understand what it's happening if it's possible.

[arcataroger]

Can someone explain me please, which kind of cache is removing const _ = cookies()?

I think it's this, the fetch cache: https://nextjs.org/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating#fetching-data-on-the-server-with-fetch

Next.js invisibly overrides the fetch() call with their own caching version that's on by default and causes stale state in unexpected places. These workarounds disable that behavior.

[ashish8796]

Thanks for the solution. I spent a whole day figuring out the issue and finding a solution was very tough for me.

[aiaruu]

thank you for the solution <3

[YippeeKaye]

Yeah the automatic caching of third party libraries using fetch as well causes many issues and there isnt a way to disable it without disabling all the other fetch in a page

[joelrozen]

I searched for ages to solve this problem with @triggerdotdev client in a server action, had read the next docs over and over and tried the same as you guys - thank you @romeobravo for this solution (although not a fan of magic solutions at least it works).
Would be good if next js had OPT IN caching for third party libraries instead of opt out.

[fuma-nama]

[Ankur-Datta-4]

Thank you soooo much 😭

[DuduzinCp]

Thank you soooo muchHHHHHHHH 😭

[dfr-exnaton]

Please stop spamming people with such comments. Thanks.

[arcataroger]

This was a gotcha for us too, using a third-party lib that had its fetch() automatically cached by Next.js.

The unstable_noStore did NOT work, but @romeobravo's workaround did: #50045 (comment) (although we used headers() instead of cookies(); either works)

Could there please be a clearer way to opt an individual component out of caching without this workaround?

[Verron]

Jan 24, 2024 update.

I am seeing unstable_noStore work on my server action. I have no store marked on both the Page component and the server action.

[kaustubhxd]

Using drizzle with neon-serverless too,

I have an app router setup. Setting this at the top of the page.js file solved it for me:
export const dynamic = 'force-dynamic'

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

[DiegoContrerasA]

I think this might work for you, it's on the official website : https://nextjs.org/docs/app/api-reference/functions/unstable_noStore

[jowo-io]

i found that using drizzle no caching was being applied on the db requests at all, and the problem was on the clientside. so i wrote a little wrapper around my app to trigger router.refresh(); on any page changes. kinda sucks but it works so i was happy there was a solution.

const router = useRouter();
const pathnameRef = useRef<string | null>(null);
const pathname = usePathname();
useEffect(() => {
  if (!pathnameRef.current || pathname === pathnameRef.current) {
    return // skip refresh
  }
  router.refresh(); // hack to bust client-side cache
}, [pathname, router, pathnameRef]);