Next.js Discord

Discord Forum

Server rendered routes with hashes do not work with browser back/forward navigation

Answered
Giant panda posted this in #help-forum
Open in Discord
Avatar
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. /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

4 Replies

Avatar
Please share code here
Avatar
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.
Image
Avatar
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?
Avatar
Giant pandaOP
Answer