Web Fundamentals

Pagination: Offset vs Cursor-Based

Web Fundamentals Map

Rendering & Browser Architecture

Critical Rendering PathScript Loading Patterns (async/defer)Event Loop Deep DiveJavaScript Module Systems (CJS, ESM, UMD)Dynamic Module Loading (import())Import on InteractionImport on VisibilityBrowser Rendering Pipeline & Layout ThrashingRendering Strategies (CSR, SSR, SSG, ISR)Streaming SSR & Progressive HTMLIslands ArchitectureReact Server ComponentsFramework Reactivity (React, Vue, Svelte, Solid)HTTP/1.1 vs HTTP/2 vs HTTP/3 (QUIC)DNS Resolution & TTL Caching

Performance

Core Web Vitals: LCP, INP, CLSPerformance Optimization Trade-offsCritical Resource PrioritizationCode Splitting & Dynamic ImportsTree Shaking & Dead Code EliminationLazy LoadingResource Hints: Preload, Prefetch & PreconnectText Compression: Gzip & BrotliImage & Video OptimizationAdaptive LoadingList VirtualizationWeb Workers vs Main ThreadMemory Leaks: Detection & PreventionManaging Third-Party ScriptsHow CDNs WorkHTTP Caching Deep DiveService Workers & Offline StrategyPWA Fundamentals

Security

Cross-Site Scripting (XSS)Cross-Site Request Forgery (CSRF)CORS ExplainedCORS Preflight, Credentials & MisconfigurationsContent Security Policy (CSP)Why is HTTPS Secure? (TLS/SSL)Authorization Best PracticesCookie Security & Session Hardening

State & Data Architecture

State Management Guide (Context vs Zustand vs Redux)React Query & Server State CachingData Fetching PatternsCaching StrategiesPagination: Offset vs Cursor-BasedReal-time Communication (WebSocket, SSE, Polling)
mediumWeb Fundamentals

Pagination: Offset vs Cursor-Based

Learn the interview-ready mental model, practical trade-offs, and production patterns for this web fundamentals topic.

Topic content

TL;DROffset for simple page navigation. Cursor for infinite scroll and mutable datasets. Choose based on data volatility and UX needs.
High Signal
Google
Meta
Netflix
Agoda
30-Second Answerstart every interview with this

Pagination strategy significantly impacts performance, consistency, and user experience. Offset-based is simple but degrades with scale and mutable data. Cursor-based (keyset pagination) provides stability for live feeds and infinite scroll but makes arbitrary page jumps harder.

Offset pagination is like using page numbers — easy to jump around but frustrating if someone inserts or removes pages while you’re reading. Cursor pagination is like using a bookmark — you always continue exactly where you left off, even if the book changes.

Request Page
Offset: Start from position N
Cursor: Start after last item token
Return results + next token

1Offset-Based Pagination

Uses page number + limit. Simple to implement and great for admin panels or static lists where users expect 'Go to page 5'.

offset-example.sqlsql
SELECT * FROM posts
ORDER BY created_at DESC
LIMIT 20 OFFSET 400;

2Cursor-Based Pagination

Uses a token (usually encoded last item's sort key) for stable traversal. Ideal for timelines, feeds, and infinite scroll where data mutates frequently.

cursor-example.sqlsql
SELECT * FROM posts
WHERE (created_at, id) < ($1, $2)
ORDER BY created_at DESC, id DESC
LIMIT 20;

3Key Trade-offs & When to Choose

Offset is simpler but can show duplicates/skips in live data and becomes slow with large offsets. Cursor is more stable and performant at scale but harder to implement 'jump to page N'.

Key Takeaways
  • ✓Offset = simple but fragile with scale and mutations
  • ✓Cursor = stable and performant for live data and infinite scroll
  • ✓Choose based on UX: numbered pages vs continuous feed
  • ✓Use composite sort keys (time + id) for cursor stability
  • ✓Consider hybrid approaches when both patterns are needed
  • ✓Always measure real-world performance and consistency
  • ✓Pagination strategy is a core architecture decision
PreviousNext

Topic Guide

On this page