next.js: ⚠ Constent tab crashes when using browser's navigation buttons in soft navigation in app dir - reproduces across projects, envs, browsers and devices

Hi @FearlessSlug after wasting almost 1 hour I found that you have used async in page component function (may be by mistake), due to this it is hanging on browser back/forward click. remove async from here: https://github.com/FearlessSlug/nextjs-app-dir-router-bugs/blob/main/src/app/test1/page.tsx#L5

This bug has huge impact on DX I literally cannot develop my app, I get constant tab crashes after every single fast refresh during development, how is this considered stable? The more my code base grows the more unbearable the DX become this is actually insane…

For me, It was because “async” keyword with “use client”. So. I want to know why client components shouldn’t be used with “Async”. I think Async client components should be no problem because async/await is a super common pattern in Javascript world.

I just copy the data fetching pattern NextJS docs for app dir feature, and the back button does freeze my chrome tab. Still does not know when Vercel team can fix this since the back button is quite common for user to use.

First make sure that you are not using async with client components, I think this occurs for some specific cases, if you think this happens for simple navigations, please create new reproduction (with specific reproduction steps) or even a new issue because it looks like no one from team is paying attention to this.

In my use case, I have a fetch function in page.tsx and in some components, it has to be async in my case. Prop drilling is out of question, since I have various component combinations with Storyblok (Headless-CMS) for a relatively large website with multiple pages in two languages.

Is there any “temporary” workaround?

I think this is not such a rare case, that several components have to be async.

Hi, checked quickly & I can confirm that it messes up after you visit any 404 page from async server component & then go back by using browser back button. May be some bug with async server component. But in actual app user won’t visit 404 page by clicking some site button, so I think its less serious than before, but still a bug. will try to find out more later.

Also by looking at docs it seems this is still at RFC stage in React, but Next team has implemented it in advance.

@imaksp So I managed to reproduce the new bug, I pushed the changes to the repo above, I just moved the pages to a (test-pages) directory for convenience, and the problems occurs for some reason because of the client component page /test1/page.tsx is using the /test1/components/SomeComp.tsx client component, here’s how to reproduce:

1. do some soft navigation (only between test1 and test2 pages, not to the 404 pages)
2. after some soft navigation go to the 404 pages
3. click the back button of the browser a few times
4. You will notice that after a couple of times of successfully navigating away from the 404 page which sometimes make the tab do a full refresh the app will go back to the soft navigation when navigating back and after a couple more back navigation you will see that the app will no longer respect the back button navigation and the URL changes, and the page content doesn’t change, so even though you are on URL /test1 you will still see the content of the /test2 page

Can confirm, happens for me too when testing the above repo/deployment.