Infinite Scroll & Pagination

Pagination controls how a large collection is divided into manageable pages. Infinite scroll removes explicit page controls and loads more content as the user approaches the end. The implementation quality depends heavily on the pagination model behind it.

Offset Versus Cursor

Offset pagination asks for limit=20&offset=40. It is simple, but it can duplicate or skip items when new rows are inserted before the current offset. Cursor pagination asks for items after a stable value such as the last item ID or creation timestamp.

type Page<T> = {
  items: T[];
  nextCursor: string | null;
};

type FeedItem = {
  id: string;
  createdAt: string;
  title: string;
};

export async function fetchFeedPage(cursor: string | null): Promise<Page<FeedItem>> {
  const params = new URLSearchParams({ limit: "20" });
  if (cursor) params.set("after", cursor);

  const response = await fetch(`/api/feed?${params}`);
  if (!response.ok) throw new Error("Failed to load feed");
  return response.json() as Promise<Page<FeedItem>>;
}

The server returns nextCursor from the last item in the page. When it returns null, there is no next page.

Sentinel Fetching

Place a sentinel element after the list. When it intersects, fetch the next page unless a request is already in flight or the list has ended.

export function observeInfiniteScroll(
  sentinel: Element,
  loadNextPage: () => void,
) {
  const observer = new IntersectionObserver(([entry]) => {
    if (entry?.isIntersecting) loadNextPage();
  }, { rootMargin: "400px" });

  observer.observe(sentinel);
  return () => observer.disconnect();
}

Use skeleton rows during the next-page fetch so layout remains stable. Spinners communicate waiting, but skeletons preserve the rhythm of the list and reduce perceived jank.

Further Learning

Search these terms to go deeper:

• “cursor pagination stable ordering” — avoiding duplicate and skipped items
• “IntersectionObserver infinite scroll sentinel” — loading pages near the viewport
• “infinite scroll accessibility” — preserving navigation and announcing new content
• “pagination skeleton loading states” — perceived performance for incremental lists

Infinite Scroll & Pagination

You can’t load 10,000 posts at once — so you load them in chunks. Pagination is splitting a big list into pages. Infinite scroll is loading the next chunk automatically as the user scrolls near the bottom (like a social feed).

Two ways to ask for “the next chunk”

• Offset — “give me 20 items, skipping the first 40.” Simple, but it has a bug: if new items get added at the top while you scroll, items shift and you can see duplicates or skips.
• Cursor — “give me 20 items after this one” (using the last item’s id or timestamp). This stays stable even when new items appear.

// cursor-based: ask for items after the last one we have
const res = await fetch(`/api/feed?limit=20&after=${lastId}`)
const { items, nextCursor } = await res.json()
// when nextCursor is null, there are no more pages

Loading the next page automatically

Put an invisible marker element (“sentinel”) at the bottom of your list. When the user scrolls it into view, load the next page. The browser’s IntersectionObserver makes this easy:

const observer = new IntersectionObserver(([entry]) => {
  if (entry.isIntersecting) loadNextPage()
}, { rootMargin: '400px' })   // start loading a bit early
observer.observe(sentinel)

The 400px means “start loading before they actually reach the bottom,” so new content is ready by the time they get there.

Polish

• Show skeleton rows (gray placeholders) while the next page loads — smoother than a spinner.
• Stop fetching once you’ve reached the end, or you’ll keep firing pointless requests.

In one sentence

Infinite scroll loads more items as the user nears the bottom — use cursor pagination (ask for items after the last one) to avoid duplicates, trigger the next fetch with an IntersectionObserver sentinel, and stop when the list ends.

Want to go deeper?

Switch to Expert mode above for the full cursor implementation, sentinel setup, and skeleton loading states.