What are different approaches to persisting the state of a page(dynamic pages included)?
On social media sites like instagram, let's say we scroll down a big list of comments and open the profile page for one of the commentors. Now if we navigate back to the comments page again(using back button presumably) the whole page's state is reset, the comments are loaded again(maybe cached), the position on the page we scrolled to(the comment whose commentor's profile we opened) is lost. It would be a hassle to scroll back to that comment again. So, how do apps mitigate this behaviour? I'd like hear about solutions to this which works on dynamic pages as well(like /user/1 and /user/2 both pages have their individual states persisted).
1 Reply
Check this out if you haven't https://mmazzarolo.com/blog/2021-04-10-nextjs-scroll-restoration/
Scroll restoration in Next.js
Next.js doesn't handle scroll restoration out-of-the-box. Here are a couple of options to support scroll restoration in Next.js projects.