-
Notifications
You must be signed in to change notification settings - Fork 26.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Crash when navigating back to a page using the browser's back button, after the page has been revalidated #61336
Comments
I've got a similar issue. Opening up your example in a normal browser window, going to
|
I tried with the following repository. RSC Payload fetch seems to be looping when press browser's back after reloading page. demo.mov |
Same issue, happens to me when setting a cookie in a server action. Seems to be happening when the router cache is cleared (which happens both when setting a cookie or revalidating). |
I am seeing this issue too i go back after refreshing and i get swarmed with requests that crashed my page and my backend, it happens when the page awaits for too long when going back (i replaced some code with an awaited timeout). For example you can wait for a fetch request if it takes too long the client side starts spamming requests. |
A workaround i found was to reduce the number of async function i await for before rendering the page and move my vercel functions to the region closest to my database with the |
Workaround: Use a |
Hi there -- thanks for the report. I just verified this against the latest canary and it seems to be resolved by #61687 (despite this reproduction being different, it appears to have the same underlying cause). |
@ztanner Thank you! I updated my original reproduction code to use the latest canary version (14.1.1-canary.38), and couldn't see bursts of duplicate requests anymore 👍 The "Application error: a client-side exception has occurred (see the browser console for more information)" issue also seemed to be resolved until I increased the 500ms loading delay just a bit. Then the error started to appear again. Here is the modified reproduction code using 14.1.1-canary.38 with the loading delay increased to 1500ms for good measure: https://github.com/jviide/next-issue-reproduction2. The corresponding CodeSandbox can be found at https://codesandbox.io/p/github/jviide/next-issue-reproduction2/main. On CodeSandbox it's probably easiest to open the rendered page in a new browser tab so the back button works a bit more consistently. The reproduction steps remain the same:
For me the error message appears most of the time, but every now and then there is no error. In such cases retrying the reproduction steps usually errors again. |
Thanks for the updated repro @jviide! I'll reopen this for now while we investigate the cause |
Suggestions so far don't work for me. I'm using parallel route modals and am getting this error on Edit: I suppose I could manually set a |
same issue godamn it drives me nuts |
@Wei102193 I suggested above to add a |
seems to work, why? also don't really want that whole page to be loading. |
I don't know precisely why, but I'm guessing it's some conflict with the client-side router cache trying to display content that has been purged and somehow running into a fetch loop. By adding the All speculation, I have no understanding of the internals. |
Actually loading.js is the only way that works for me atm. Gonna use loading till they fix this issue. Thanks! |
I've also been dealing with this issue on next@14.1.0 but when I rolled back to next@14.0.0 problem just went away. Also @jviide second sandbox works fine on next@14.0.0 for me. Intereseting that it breaks for you. revalidatePath.movAlso fun fact - Firefox works ok on desktop on both next versions (macOS). |
@kamilkazui You're right, it seems that I was mistaken. I can't reproduce the issue with 14.0.0 either. My apologies. After some bisecting it seems that the earliest version that the issue can be reproduced with is 14.0.5-canary.6. I updated the original issue description accordingly. |
### What When the popstate action is fired (as is the case in a browser back button), if the page you're going back to has missing cache node data, the router will crash. ### Why Almost all router actions will suspend at the app-router level with the exception of `ACTION_RESTORE`. This was to address an issue where suspending in the router would add enough delay for browser scroll restoration behavior not to work. As a result, when going back to the page with missing data, app-router wouldn't suspend but layout-router would suspend on the missing data while triggering a lazy fetch. We trigger a server-patch with the applied lazy data, but when React replays the render, it will replay the branch without the cache node data applied. This results in the router getting caught in a loop of suspending, applying the cache node, replaying the branch without the cache node, and eventually crashing due to an error thrown by React to prevent re-suspending indefinitely. ### How This adds a property to the cache node to signal if the lazy data has been resolved. If it has been, we won't call the server patch action again. Fixes #61336 Closes NEXT-2438
Hype. Thank you @ztanner! |
Thank you, @ztanner! I can confirm that this fixes the issue in my environment as well. |
Amazing @ztanner, I thought I was going mad with this one. Cheers for the fix! |
When the popstate action is fired (as is the case in a browser back button), if the page you're going back to has missing cache node data, the router will crash. Almost all router actions will suspend at the app-router level with the exception of `ACTION_RESTORE`. This was to address an issue where suspending in the router would add enough delay for browser scroll restoration behavior not to work. As a result, when going back to the page with missing data, app-router wouldn't suspend but layout-router would suspend on the missing data while triggering a lazy fetch. We trigger a server-patch with the applied lazy data, but when React replays the render, it will replay the branch without the cache node data applied. This results in the router getting caught in a loop of suspending, applying the cache node, replaying the branch without the cache node, and eventually crashing due to an error thrown by React to prevent re-suspending indefinitely. This adds a property to the cache node to signal if the lazy data has been resolved. If it has been, we won't call the server patch action again. Fixes #61336 Closes NEXT-2438
Really happy I found this.
This works for me too. No more crashing websites but am I missing something? I'm on I can see the network tab flooding until my |
the latest release has fixed this issue
…On Sun, Mar 3, 2024 at 7:29 AM Darius ***@***.***> wrote:
Really happy I found this.
*Workaround*: Use a loading.js file for that route.
This works for me too. No more crashing websites but am I missing
something? I'm on 14.1.2-canary.2 and I'm not seeing a permanent fix like
you are all apparently seeing from @ztanner <https://github.com/ztanner>
without a loading component when navigating back with the browser button on
some pages. 🙈
—
Reply to this email directly, view it on GitHub
<#61336 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AGVM56SZTR4FEEUKWOHW7FDYWMJRPAVCNFSM6AAAAABCPYQT7SVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSNZVGE2DINRSGQ>
.
You are receiving this because you were mentioned.Message ID: <vercel/next
.***@***.***>
|
Which is why I'm asking if I'm missing something 🙂 I'm still seeing my network going into an infinite loop on |
@dariusrosendahl if you're able to isolate the bug to a minimal reproduction and open a new issue I'd be happy to take a look. Otherwise it'll be difficult to debug without more information. |
Hi @ztanner Hopefully this is minimal enough, I'm not sure if it's the way I'm fetching data, if it's the CMS I'm using or something else: https://stackblitz.com/edit/stackblitz-starters-mx9ook?file=app%2Fcomponents%2FOverview.tsx |
Hi @dariusrosendahl -- I took a look at your repro and I believe the issue is coming from your usage of |
This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you. |
Link to the code that reproduces this issue
https://github.com/jviide/my-minimal-nextjs-issue-reproduction
To Reproduce
The reproduction is also available at CodeSandbox: https://codesandbox.io/p/github/jviide/my-minimal-nextjs-issue-reproduction/main
npm i
and start the dev server withnpm run dev
.revalidatePath("/", "layout")
.Current vs. Expected behavior
When the browser's back button is pressed after submitting the form, the root page at / should be opened.
Instead the browser makes a burst of GET calls to the root page (observable on the browser's network inspector), failing after a while.
Provide environment information
Operating System: Platform: linux Arch: arm64 Version: #1 SMP Fri Jan 19 08:53:17 UTC 2024 Binaries: Node: 20.11.0 npm: 10.2.4 Yarn: 1.22.21 pnpm: 8.15.0 Relevant Packages: next: 14.1.1-canary.20 // Latest available version is detected (14.1.1-canary.20). eslint-config-next: N/A react: 18.2.0 react-dom: 18.2.0 typescript: N/A Next.js Config: output: N/A
Which area(s) are affected? (Select all that apply)
App Router
Which stage(s) are affected? (Select all that apply)
next dev (local), next start (local)
Additional context
The issue seems to reproduce more easily when root page's data fetching is not instantaneous. The root page implementation simulates this by artificially sleeping for 500 milliseconds.
Tested on Chrome 121 and Safari 17.3 on macOS 14.3.
Next.js 14.0.0 was the earliest version I tested, and the issue also appears there.Update: The issue can't be reproduced with 14.0.5-canary.5, but can be reproduced with 14.0.5-canary.6.
NEXT-2438
The text was updated successfully, but these errors were encountered: