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?

Here’s the example app.

Here’s the code. It 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.