Using revalidateTag() inside dynamic route handler is unstable

[younes101020]

Link to the code that reproduces this issue

https://github.com/younes101020/electra-v2/

To Reproduce

1. Clone the repository

youyou@youyou:~/electra$ git clone git@github.com:younes101020/Electra-v2.git

2. create .env.development file in root directory and past .env.example into it and for TMDB_API_KEY + TMDB_ACCESS_TOKEN env you can retrieve them from https://www.themoviedb.org/settings/api
3. Install dependencies and start dev environment (you need docker compose)

youyou@youyou:~/electra$ yarn
youyou@youyou:~/electra$ yarn dev

4. go to /src/app/api/movie/[sessionid]/[accountid]/[movieid]/rating/route.ts file and replace:

// Replace this (this code is the only way I've found to fix the initial issue)
await new Promise((resolve) => {
      setTimeout(() => {
        resolve(revalidateTag(`rated:${params.accountid}`));
      }, 3000);
});
// By this
revalidateTag(`rated:${params.accountid}`)

5. Go to http://localhost:3000 logged in, click on any movie card image and add/update movies rating

Current vs. Expected behavior

I expect the cache initiated by the unstable_cache() method to be revalidated each time a movie's score is assigned.

Sometimes the on-demand cache isn't revalidated while the route that executes revalidateTag() is called. I have the impression that the route handler returns a response even before letting revalidateTag() finish the job properly, so I've temporarily wrapped this function in a promise with a fairly long delay.

I think it would be good to return a promise to revalidateTag() instead of nothing once the cache has been revalidated or to run this function in a worker, it wouldn't bother me personally, I would only have to manage the UI with useOptimistic

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: #1 SMP Thu Oct 5 21:02:42 UTC 2023
  Available memory (MB): 7908
  Available CPU cores: 12
Binaries:
  Node: 21.6.0
  npm: 10.8.1
  Yarn: 1.22.21
  pnpm: 9.1.2
Relevant Packages:
  next: 14.2.3 // There is a newer version (14.2.5) available, upgrade recommended! 
  eslint-config-next: 14.2.3
  react: 18.3.1
  react-dom: 18.3.1
  typescript: 5.4.5
Next.js Config:
  output: standalone

Which area(s) are affected? (Select all that apply)

Runtime

Which stage(s) are affected? (Select all that apply)

next dev (local), next build (local), next start (local)

Additional context

No response

[eps1lon]

Sometimes the on-demand cache isn't revalidated while the route that executes revalidateTag() is called.

Can you trim down your app to just the essential parts and then explain what steps you took to reach the actual behavior and what you expected to happen instead?

Keep in mind that revalidateTag isn't synchronous. When a cache is invalidated, calling fetch immediately afterwards will still get the cached entry.

[younes101020]

Thnaks for the response @eps1lon even in subsequent fetch we can see that the the cache isnt revalidated, concerning the app you need to logged in, click on any movie and add/update movie rating you will see that the cache is not always revalidated

The cached part is the movie ratings you can find the logic for it here /src/app/api/account/[sessionid]/rated/[accountid]/movies/route.ts and the invalidation logic here /src/app/api/movie/[sessionid]/[accountid]/[movieid]/rating/route.ts