Next.js Discord

Discord Forum

Infinite scroll with scroll and data restoration

Unanswered
Tibetan Terrier posted this in #help-forum
Open in Discord
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

@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 Terrier I saw this, and as I understand, I should see this behavior by default, but it's not the case
hope it helps
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 / route
I 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