Infinite scroll with scroll and data restoration
Unanswered
Tibetan Terrier posted this in #help-forum
Tibetan TerrierOP
I'm working on a page with an infinite list, where each item is clickable and leads to a different route. I load 10 items in a server action, I scroll down, more items load. I click one of the items, hit the browser's back button, and while the scrolling position is restored, I only see the initial 10 items that were originally rendered on the server. What's the best way to preserve all the data loaded until I navigate away from the main page?
19 Replies
@Tibetan Terrier I'm working on a page with an infinite list, where each item is clickable and leads to a different route. I load 10 items in a server action, I scroll down, more items load. I click one of the items, hit the browser's back button, and while the scrolling position is restored, I only see the initial 10 items that were originally rendered on the server. What's the best way to preserve all the data loaded until I navigate away from the main page?
you could store number of already loaded items and initially load them instead of 10.
@Coffee Coke you could store number of already loaded items and initially load them instead of 10.
Tibetan TerrierOP
Ideally I don't want to load anything again, I just want to see the state of the list as it was before clicking on an item.
@Mugger Crocodile possible
Tibetan TerrierOP
Do I need some external state management library for this, or is it possible to do this with Next.js alone?
Mugger Crocodile
only next.js
@Coffee Coke https://nextjs.org/docs/app/building-your-application/caching#router-cache
Tibetan TerrierOP
I saw this, and as I understand, I should see this behavior by default, but it's not the case
if any of you could take a look, this is the sample app, I just deployed it: https://next-example-snowy-ten.vercel.app/
https://github.com/asliwinski/next-example/ here's the code, it just follows one of the infinite scroll tutorials, but I added the part where if you click USER LINK on any of the items, it will take you to a different page. Then when you go back, all the items beyond the initial 10 will be gone
Tibetan TerrierOP
I don't want to invalidate the cache, I want to keep all the items in the cache and see them when I re-visit the
/ routeI know, something must be causing it invalidate it in the list if it doesnt cache
Tibetan TerrierOP
well, I'm not doing any of these things mentioned under Invalidation
idk then
Tibetan TerrierOP
thanks for taking a look
@Mugger Crocodile only next.js
Tibetan TerrierOP
Is my understanding correct that it should work this way by default?
I also face this issue myself, messaging here so I can see any fixes by others
@Arinji I also face this issue myself, messaging here so I can see any fixes by others
Tibetan TerrierOP
this seems such a common use case, right? I posted the question on SO as well.
https://stackoverflow.com/questions/78606941/next-js-14-infinite-scroll-with-scroll-position-and-state-restoration-when-navi
https://stackoverflow.com/questions/78606941/next-js-14-infinite-scroll-with-scroll-position-and-state-restoration-when-navi