Server rendered routes with hashes do not work with browser back/forward navigation
Answered
Giant panda posted this in #help-forum

Giant pandaOP
I have a really strange issue with the browser back button changing the URL correctly to the prior page, but the page content itself remains unchanged.
I found this seems to happen only when we're on a URL with a hash (e.g.
I'd like to ask if anyone has encountered this issue before and if there's any obvious mistakes which could cause such behavior?
Next.js 14.2.22
I found this seems to happen only when we're on a URL with a hash (e.g.
/example#hash
), we navigate to a different page, and then press browser back button. The page URL changes to the prior page but the page content remains unchanged (if we manually refresh the page it would show correctly).I'd like to ask if anyone has encountered this issue before and if there's any obvious mistakes which could cause such behavior?
Next.js 14.2.22
Answered by Giant panda
Workaround in the meantime: https://github.com/vercel/next.js/issues/56112#issuecomment-2496698652
4 Replies

Please share code here

Giant pandaOP
I think this is directly a bug with Next.js? I found this issue: https://github.com/vercel/next.js/issues/56112
This bug is reproduceable on Next.js' own website. Reproduction steps from the Github issue:
- Go to https://nextjs.org/docs
- Click on any of the "hashed" routes (located in the right-hand sidebar on desktop screens)
- Navigate to a different page by clicking on a page route (located in the left-hand sidebar on desktop screens)
- Click the back button on your browser. The URL changes and the page may scroll, but the page content remains from Step 3.
This bug is reproduceable on Next.js' own website. Reproduction steps from the Github issue:
- Go to https://nextjs.org/docs
- Click on any of the "hashed" routes (located in the right-hand sidebar on desktop screens)
- Navigate to a different page by clicking on a page route (located in the left-hand sidebar on desktop screens)
- Click the back button on your browser. The URL changes and the page may scroll, but the page content remains from Step 3.

Giant pandaOP
Related issue which is open: https://github.com/vercel/next.js/issues/13653
The PR to fix this issue seems to not be merged yet: https://github.com/vercel/next.js/pull/65581
I really thought such an obvious issue like this would not be an issue directly in Next.js. I spent the whole day searching for something wrong in my codebase, when it turns out the issue is from Next.js.
What's the best workaround fix in the meantime while the PR fix isn't merged?
The PR to fix this issue seems to not be merged yet: https://github.com/vercel/next.js/pull/65581
I really thought such an obvious issue like this would not be an issue directly in Next.js. I spent the whole day searching for something wrong in my codebase, when it turns out the issue is from Next.js.
What's the best workaround fix in the meantime while the PR fix isn't merged?

Giant pandaOP
Workaround in the meantime: https://github.com/vercel/next.js/issues/56112#issuecomment-2496698652
Answer