[AskJS] How do some SPAs make back button feel like it's a static page without even SSR?

Some SPA web apps, even Twitter & FB sometimes, can maintain the state of a dynamically loaded list when you go to another route OR even page, & then press back. omegle

They don’t reload the list. They don’t even lose the scrolling position.
Is there any writeup/video on how it’s done?

And it’s not because of SSR. At least I don’t think it is. Because the initial load seems to have the loading animation, which is not present after pressing back. The HTML is just there as if it’s a static page.

Hi @DashiellNico ,

Things like these can be done by storing everything in a redux store, the dynamically loaded data as well as the current scroll position of user. This way when the user navigates back, we initialise the scroll position to be same as that was stored in redux, before the user migrated to another route.

To do this, you would have to add scroll listener and then update the redux store whenever a scroll event occurs and use this value to set the scroll position of the element on screen.

It’s actually done with react-router,

for the scroll position, probably this: react-router-scroll-position

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.