Next.js Discord

Discord Forum

revalidateTag not working. Any advice?

Unanswered
Perro de Presa Mallorquin posted this in #help-forum
Open in Discord
Avatar
Perro de Presa MallorquinOP
Hi, I've tried a bunch of different ways to try and get revalidateTag to work, but no joy. I have resorted to falling back to revalidatePath for everything. Anyone have any advice?
- https://nextjs.org/docs/app/building-your-application/caching#invalidation-1
- https://github.com/sprintup/ivystreetblog/blob/ed223c1c578d6bc1c7f691b74be9f327ed0b3652/app/public-bookshelf/public-booklist/%5Bid%5D/page.jsx#L27
The actual public booklist is here https://ivystreetblog.vercel.app/public-bookshelf and when I add something (booklist, book, etc.) I have to revalidate the path in order for it to show up. I'd rather use revalidateTag. I've tried:
- deactivating cache https://github.com/sprintup/ivystreetblog/commit/418743a8de5b64977dc1fe1351166d9cb2684e68
- revalidating the tag with the fetch API: https://nextjs.org/docs/app/building-your-application/caching#fetch-optionsnexttags-and-revalidatetag
But again, the data doesn't show when I switch pages unless I revalidatePath. For instance, if I add a public booklist with a book (using revalidateTag -> not currently implemented) I'd have to refresh the page for it to show up on the public bookshelf. Therefor, I implemented revalidatePath, which basically bypasses the caching feature, which is not optimal but it works. I'd like it to be fast.

1 Reply

Avatar
revalidateTag must be called from a server action. this is what I did on my project:

"use server";

import { revalidateTag } from "next/cache";

export async function RevalidateTag(tag: string) {
  revalidateTag(tag);
}

Then you will make a call to RevalidateTag instead of revalidateTag. What I did here was place this as action of a button:

export function RevalidateTagButton({
  tag,
  onSuccess,
}: {
  tag: string;
  onSuccess?: () => void;
}) {
  const handleAction = async () => {
    await RevalidateTag(tag);
    onSuccess?.();
  };

  return (
    <>
      <form action={handleAction}>
        <RefreshButton />
      </form>
    </>
  );
}