In partnership with

See this?

This is the YouTube home page.

Let's focus on the main feed.

This is where the evil algorithm recommends videos you would binge-watch and waste hours on.

As a fullstack developer, how would you implement this feature?

I'm not talking about showing the thumbnail, preview, or all that stuff.

How do you implement infinite scrolling?

You need to, probably:

  1. In the frontend: fetch videos (metadata like thumbnail, link to the actual video, title, etc) from a server.

  2. In the server API: query the videos from the database.

Lucky for you, there's a Video Pool table for every user. It includes 1000 videos that they are most likely to watch.

Should you send back those 1000 videos to the frontend?

Maybe?

What does the frontend need? Loading all 1000 video thumbnails at once is not a good idea because image loading takes lots of time.

How do you load less video while providing a good user experience?

  1. On the initial page load: The frontend only needs to display a reasonable amount of video, like 20.

  1. When the user scrolls past that: It fetches the data and loads the next 20 videos.

This is the fundamental idea of pagination, a commonly used technique in software engineering. Rather than sending a huge amount of data all at once, you split it into smaller chunks called pages.

This approach has two clear benefits:

  • It shows content faster. Users are happier.

  • It reduces the server load and data transfer time because you are sending back less data.

You will see pagination everywhere:

  • Product pages with page numbers

  • Infinite scrolling on social media

  • A “More Results” button on Google Search mobile

The Tech newsletter for Engineers who want to stay ahead

Tech moves fast, but you're still playing catch-up?

That's exactly why 200K+ engineers working at Google, Meta, and Apple read The Code twice a week.

Here's what you get:

  • Curated tech news that shapes your career - Filtered from thousands of sources so you know what's coming 6 months early.

  • Practical resources you can use immediately - Real tutorials and tools that solve actual engineering problems.

  • Research papers and insights decoded - We break down complex tech so you understand what matters.

All delivered twice a week in just 2 short emails.

Now you understand what pagination is, next week we will go over how to implement it.

Fee from Anime Coders

PS: I’m thinking about creating a crash course (in a similar format to this article, written with visuals but longer) that helps you pick up a technology fast (maybe in a weekend). Do you think this would be a good idea? If so, click the link here and let me know the technology you would be interested in learning.

How did you like today's email?

Login or Subscribe to participate

Keep Reading