next.js: [NEXT-1128] Client-side cache is not revalidated when calling revalidatePath + redirect in server action

Verify canary release

I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
      Platform: linux
      Arch: x64
      Version: #42~22.04.1-Ubuntu SMP PREEMPT_DYNAMIC Tue Apr 18 17:40:00 UTC 2
    Binaries:
      Node: 18.16.0
      npm: 9.5.1
      Yarn: 1.22.19
      pnpm: N/A
    Relevant packages:
      next: 13.4.2-canary.0
      eslint-config-next: 13.4.1
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 5.0.4

Which area(s) of Next.js are affected? (leave empty if unsure)

App directory (appDir: true)

Link to the code that reproduces this issue

https://github.com/benrandja-akram/next-js-revalidate-with-redirec-bug

To Reproduce

go to profile page
submit form
go to profile page again
submit form again
go to profile page
Cache is used and profile page shows stale data.

Describe the Bug

client side cache is not revalidated When calling revalidatePath with a redirect in server action

Expected Behavior

revalidate client side cache when calling revalidatePath + redirect i nserver action

Which browser are you using? (if relevant)

chrome

How are you deploying your application? (if relevant)

https://revalidate-next-js-bug.vercel.app/

_NEXT-1128

About this issue

Original URL
State: closed
Created a year ago
Reactions: 20
Comments: 21 (15 by maintainers)

Most upvoted comments

It does work as intended if you only call revalidatePath, but it does fall appart if used with redirect, and there is also the second problem of only revalidating the cache for 1 page, even if we call revalidatePath multiple times.

From what I’ve seen in my repro + others is that it’s not just for 1 page. It only works on the current path. So even a single revalidatePath call is not working as intended.

Example: Current url /dashboard/posts/new revalidatePath called on /dashboard/posts Next Link navigation to /dashboard/posts === stale data.

sannajammeh on May 13, 2023

Ran into this bug as well. This is not just with redirect, its with all revalidatePath usage.

Here’s my repro: https://github.com/sannajammeh/app-router-revalidation-not-refreshing

As usual run

pnpm install
npx prisma db push
pnpm dev
Navigate to /player in the browser
Click “Create Item” button.

Observations:

After pressing “Create Item”: Root Layout will update with the correct item.
Now press “ITEM LINK: <whatever item name>” and type testing into input field and press update
Root layout will update again and u see “ITEM LINK: testing” in the left
Click on all other links on the left. Every option will return the previous result without update except for All Items useRouter() 'forceOptimisticNavigation1'
Redo steps 2 - 4 and see that now every single option returns stale data.

Results:

Root Layout - Always updates
Child page - Always stale
Child page Layout - Always stale
Child page with router.push - Always stale
Child page with router.push & forceOptimisticNavigation - Updates once, subsequent updates always stale
Server console: Actually logs prisma performing select query after revalidation.

If you continue adding random numbers while updating, you will soon see each link giving you a different number.

This is very weird caching behavior. Imho, the Link & useRouter hook are too limited in controlling cache on the client side. Ideally a hard navigation prop should be present on the Link component and forceOptimisticNavigation should be documented.

sannajammeh on May 10, 2023

I have the same issue, any ideas how to fix this cache issue?

arnasofc on May 8, 2023

This was fixed by #50848 in the latest canary. Let us know if it’s still not working correctly, thanks!

shuding on Jun 8, 2023

@vasco3 using <a href will trigger a hard navigation

That is correct, but we are looking for hard navigation using SPA. That way we wont unmount parent layouts.

sannajammeh on May 12, 2023

@vasco3 using <a href will trigger a hard navigation

benrandja-akram on May 12, 2023

@arnasofc a temporary workaound would be calling router.refresh in a client component

benrandja-akram on May 8, 2023

@eric-burel yeah I want. to revalidate nested layout when I use a server action when submitting a form. The client state isn’t updated with the revalidatePath so even if I navigate (with Link) back and forth of different routes the data is stale. The only way to get fresh data is to navigate with a anchor or I assume window.location.href.

vasco3 on May 29, 2023