← Lessons

quiz vs the machine

Gold1390

Frontend

The Pagination and Infinite Scroll Data

Fetch large lists in pages and stitch them together for tables or endless feeds without huge payloads.

5 min read · core · beat Gold to climb

Why pages exist

Loading thousands of rows at once is slow and wasteful. Pagination splits a list into pages so each request returns a manageable slice, and the client asks for more as needed.

  • Smaller payloads load faster and use less memory.
  • The server does less work per request.
  • The user sees content sooner.

Offset versus cursor

There are two common page strategies, and the choice affects correctness.

  • Offset pagination asks for page numbers or a skip count; it is simple but can skip or repeat rows when the list changes mid scroll.
  • Cursor pagination asks for items after a stable pointer such as the last id; it stays correct as data shifts and scales better.

Two shapes of consumption

The same paged endpoint feeds two UI shapes. Classic pagination swaps the page, replacing the visible slice. Infinite scroll appends each new page to a growing list as the user nears the bottom.

  • Infinite scroll keeps prior pages and concatenates new ones.
  • A scroll sentinel near the end triggers loading the next page.
  • Restoring scroll position requires keeping fetched pages cached.

Key idea

Fetch long lists in pages, prefer cursor based paging for correctness under change, and choose classic page swapping or appending infinite scroll for the UI.

Check yourself

Answer to earn rating on the learn ladder.

1. Why is cursor pagination often preferred over offset pagination?

2. How does infinite scroll differ from classic pagination in the cache?