LLD: Offset and Cursor Pagination

Pagination: Offset & Cursor

If the backend has too much data, loading everything at once is not possible. That’s why we use pagination or infinite scroll for better access.

• Infinite Scroll: The user doesn't know when the data will end. If data is sorted alphabetically (A to Z), you can’t directly jump to "Z." It has no footer and is best for live or addictive content.
• Pagination: You can go to a specific page, making it ideal for admin panels. Infinite scroll is mobile-friendly, while pagination is better for structured navigation.

Offset Pagination

Pagination can be:

1. Server-Side Pagination
2. Frontend Pagination

In server-side pagination, data is loaded page-wise. Example: If you request ?page=1, you get 25 records. Clicking ?page=2 fetches the next 25, and so on. This is called offset pagination. If ?page=2&count=20, it skips 40 records and fetches 41-60.

• Faster initial load than frontend pagination.

• Each page change requires an API call.

• Example API:This fetches 10 products while skipping the first 10 records.

  https://dummyjson.com/products?limit=10&skip=10&select=title,price
  

In frontend pagination, API is called once, and data is stored locally.

• No extra API calls, faster access after load.
• Easy to implement, no backend logic needed.
• Cons: High initial load time, heavy on the browser.

Cursor Pagination

Google introduced cursor pagination to solve offset pagination issues.

Offset Pagination Problem

• Suppose there are 12 users, and each page shows 4 users.
• After fetching page 2, new users register on page 1.
• This shifts data, causing missing records or duplicates.

How Cursor Pagination Solves It

• Instead of page numbers, it uses a cursor (like a timestamp or ID) to fetch data.
• Example:
  • Cursor = 7, Limit = 4 → Fetches 4 records after 7.
  • Cursor = 9, Limit = 6 → Fetches 6 records after 9.
• Advantages:
  • No duplicate or missing data.
  • Faster and better for real-time updates.

Use offset pagination for structured data and cursor pagination for real-time updates like social media feeds.

Cursor pagination does not track pages, making it a good fit for infinite scroll, where pages don’t matter. It is useful when sorting is not required. In social media feeds, for example, we don’t have the option to sort posts normally, so cursor pagination works best.

I have written a pagination component. Check it out!

Code Link:

Deployed Link: