This was more of a shower thought. So, nearly any social media platform has infinite scrolling. But how do they prevent duplicates?
So, lets say you fetch content with ajax. When, for example, you have a static list of 50 items, and you want to fetch 10 more results everytime the user has reached the bottom, you can easily sort by e.g. page:
$.ajax(
url = "mysite.api/content?page=2"
...
)
But for a website like YouTube, your recommendations change probably every second and results cannot be sorted by page. E.g. if I wanted to fetch content for YouTube startpage it'd look something like
$.ajax(
url = "youtube.api/start?user=aXqq1...&page=1"
...
)
But as soon as I scroll further, and YouTube fetches another page, the algorithm might already recommend different videos, or resort some of them, so duplicates might appear. So that's not an option, and I'd really like how they prevent it.
My current thoughts were:
1. Websockets:
YouTube queries for video content once and then loads more from the preloaded list everytime i scroll to the bottom.
Problem: YouTube doesn't know how far I will scroll. That would mean either they store a ton of video recommendations or they execute a new query after, lets say, 500 videos, which would again lead to the problem of duplicates.
2. Including already listed videos in ajax request
Everytime new videos are fetched, YouTube posts the list of videos (which are already loaded) back to the api so it can exclude those.
Problem: The loading times become slower every time a new request is made as more data has to be exchanged.
Which gets me right to where I started: How do they (efficiently) prevent duplicates?