fetch with next.tags and revalidateTag() not working

[assad-skipbau]

Summary

Using next.tags in a fetch request within a server component (SSR) page does not seem to trigger caching as expected.
during development every request logs:

GET https://url?user_key=user_key 200 in 1269ms (cache skip)
Cache skipped reason: (auto no cache)

If I switch to using:
fetch(url, { cache: "force-cache" })
…it appears to cache the response after the first request, but the first request always shows:

GET https://url?user_key=user_key 200 in 1269ms (cache skip)
Cache skipped reason: (cache-control: no-cache (hard refresh))

I've also set up an API route that calls revalidateTag("orders"), but it has no effect — the request doesn’t re-fetch or invalidate.
On build, the page is statically generated and does not re-fetch whatsoever.

My Component:

// app/orders/page.tsx
const Orders = async () => {
  const user_key = "blabla";

  const orders_request = await fetch(
    `https://url?user_key=${user_key}`,
    {
      next: {
        tags: ["orders"],
      },
    }
  );

  const orders: Orders = await orders_request.json();

  return (...) // render stuff
};

The Aim is to have a cached data until a request comes from a second server to trigger revalidation of the data (this happens once new data inserted). The best approach is to have the request cached via tags, since one user can have new data while other not.

Additional information

I’m not using a canary version — could this be the issue?

[bennycallanan]

Hey @assad-skipbau,

Could be of no help at all, but just some thoughts.

1. Cache skipped in dev:
In development mode, Next.js usually skips caching to make things easier to debug. That line:

Cache skipped reason: (auto no cache)

…is normal during dev. To really test caching, try running the app in production mode (next build && next start). That’s when the cache behavior actually kicks in as expected.

2. First request always skipped:
Even if you’re using cache: "force-cache", the first request might still hit the origin if nothing is cached yet. After that, it should be cached unless there’s a header or setting forcing it to bypass. That cache-control: no-cache message makes me think something might be telling it to skip caching—maybe a hard reload or a server-side header?

3. revalidateTag() not doing anything:
A couple of things to check:

• revalidateTag("orders") only works with server-side fetches that actually used next: { tags: ["orders"] }. If the tag name doesn’t match exactly, it won’t trigger a re-fetch.
• Also, it won’t affect any fetches done on the client side. So make sure the fetch in question is happening server-side (in a route handler or server component).
• After calling revalidateTag(), the next request should fetch fresh data, not the current one.

4. Static generation note:
If the page was statically generated (like with getStaticProps or route segments that use static rendering), you’ll need to set a revalidate interval to get re-fetching working:

export const revalidate = 60;

That tells Next to re-gen the page in the background after 60s. Otherwise, it stays frozen.

[assad-skipbau]

Hi @bennycallanan,
Thank you for the Explanations. I have re-checked the response i am getting from the server, there is no such a header preventing caching. In addition i even made sure that this not happening by changing the headers coming from the server to allow caching. Nothing changed.
This may be because of the dev environment. the issue sounds more like "just trust the process".
Regarding the build and static generation. I am not sure why the page is completely cached. even if i remove the cache tag from the fetch request, the page still rendering as static, even tho it have a fetch request.
I have tried to "trust the process" but the revalidating of the tag is still not doing anything. At this point, i am not sure if my code was that bad since it have been a while since i last coded, or if there is something else happening.
My component is written in the question. the code rendered in the return() can't be the issue.
The "Order" component where this is happening is generated as static, which makes me wonders why. Since each user will have it's own version of that page. Any idea of what the logic happening behind the scene that determining the "fate" of this component XD?
The revalidate interval will revalidate the page at interval of time, but this is not the intended behaviour.
Any other advice?

[bennycallanan]

Have you tried adding export const dynamic = 'force-dynamic'; to your component? That might force it to render dynamically and help with the revalidateTag() issue.

[assad-skipbau]

Hi,
After completely deleting everything and re-cloning the repository, it worked for some reason. I'm not sure what the issue was.

Regarding export const dynamic = 'force-dynamic'; — this will make the page dynamic, which is not the desired behavior. The page should be rendered as static until it is revalidated.

Anyway, what I learned from this is that in the development environment, the cache is skipped.