Lesson 3.2

Pagination versus infinite scroll

Offset pagination is simple and breaks quietly: rows inserted while the user reads page one push items across the boundary, so page two skips them.

4mAdvanced5.8k students

Overview

The choice is about state, not taste

Offset pagination is simple and breaks quietly: rows inserted while the user reads page one push items across the boundary, so page two skips them. Cursor pagination keys off a stable sort value and stays correct under writes.

Infinite scroll accumulates every loaded page in memory and in the DOM. Without virtualisation it degrades steadily the longer someone browses, and it makes returning to a position genuinely hard.

Whichever you pick, encode position in the URL. A result the user cannot link to or return to after a refresh is a small betrayal.

In this lesson you will:

  • Compare offset and cursor pagination
  • Understand the memory cost of infinite lists
  • Keep a shareable URL for a result position

Resources

Previous Lesson
Next Lesson
Pagination versus infinite scroll — React Performance Engineering — Vertex