Refresh + router.back() issues
Unanswered
Red wood ant posted this in #help-forum
Red wood antOP
Hi all,
The issue I am having is quite high level and not sure what chunks of code will be particularly useful straight away, so I will just describe it at this stage. (Please note this is in next 15).
I have a site with server-rendered pages. These pages fetch data and use suspense to show skeletons whilst this data is fetching. I have a back button component on some of these server rendered pages - this is a simple client component that creates an instance of
This seems to work well. If a user navigates to a page, and then presses a back button, it pretty much instantly takes them back to the previous page.
However, if a user refreshes the page at all, it seems to break the navigation chain. Pressing the back button still continues to correctly navigate a user back, yet for a split second when rendering the previous page, it is just blank. Just the navbar and footer visible for a moment, until the page content seems to load. The content then loads (with skeletons), then fully loads (with fetched data).
I am wondering why, after a refresh,
The issue I am having is quite high level and not sure what chunks of code will be particularly useful straight away, so I will just describe it at this stage. (Please note this is in next 15).
I have a site with server-rendered pages. These pages fetch data and use suspense to show skeletons whilst this data is fetching. I have a back button component on some of these server rendered pages - this is a simple client component that creates an instance of
useRouter() and executes router.back() on click (where router is the instance).This seems to work well. If a user navigates to a page, and then presses a back button, it pretty much instantly takes them back to the previous page.
However, if a user refreshes the page at all, it seems to break the navigation chain. Pressing the back button still continues to correctly navigate a user back, yet for a split second when rendering the previous page, it is just blank. Just the navbar and footer visible for a moment, until the page content seems to load. The content then loads (with skeletons), then fully loads (with fetched data).
I am wondering why, after a refresh,
router.back() seems to cause this hydration problem. Sorry if I am missing something trivial - it has been driving me crazy lol. Thanks!6 Replies
Red wood antOP
Bumping
Red wood antOP
Final bump before giving up
Ok I don’t know why you’re getting that weird behavior but it’s important to note that the hard browser refresh purges the React Server Components payloads that were stored and cached on the client (Router Cache) to have instant full navigations between pages that were already visited
I assume that
The fact that the navbar and footer do not have this issue is because they will persist across navigations in the same route segment since they’re part of the layout
router.back() is trying to get the RSC payload for that previous page but it doesn’t exist anymore.The fact that the navbar and footer do not have this issue is because they will persist across navigations in the same route segment since they’re part of the layout
Do you get an actual “hydration” error or you are calling it like that because it seems like one?
Red wood antOP
ah ok, yeah that makes sense thanks. No, there is no actual error, sorry for confusion - just the strange behaviour described (which is erroneous). Its only minor, and can probably be explained by the non-existent RSC payload, but frustrating nonetheless!