Back
Web Fundamentals

API Design Best Practices: Pagination, Errors, Versioning & Type Safety

Web Fundamentals
Build & Deployment: Monorepo, CI/CD, Strategies & Release SafetyState Management: Choosing the Right SolutionRedux: Predictable State Container (RTK + RTK Query)React Query (TanStack Query): Server State CachingData Fetching Patterns: REST, GraphQL, tRPC & Real-timeGraphQL Fundamentals for Frontend: Shape, Caching, and TradeoffsgRPC-Web Fundamentals: Browser Constraints and Proxy ModelCaching Strategies: Client, Server & EdgeData Normalization: Organizing State for PerformanceAPI Design Best Practices: Pagination, Errors, Versioning & Type SafetyAPI Versioning Strategies for Frontend CompatibilityPagination: Offset vs Cursor-BasedRate Limiting & API Resilience: Retries, Backoff, Jitter, IdempotencyHow Frontend Developers Can Handle Millions of API Requests Without Crashing EverythingBrowser Storage: Cookies, SessionStorage, LocalStorage, IndexedDBReal-time Communication: WebSockets, SSE & PollingWebRTC: Real-Time Communication in the BrowserCore Web Vitals: LCP, INP & CLSPerformance Optimization Trade-offsCritical Resource Prioritization: Optimize Loading OrderCode Splitting: Optimize Bundle Size with Dynamic ImportsTree Shaking: Eliminate Dead Code from Your BundleLazy Loading: Load Resources On-DemandResource Hints: Preload, Prefetch & PreconnectText Compression: Gzip and BrotliImage & Video Optimization: Modern Formats & TechniquesAdaptive Loading: Optimize for Device & NetworkList Virtualization: Render Large Lists EfficientlyWeb Workers vs Main Thread: Offloading Heavy WorkMemory Leaks in Frontend Apps: Detection & PreventionManaging Third-Party Scripts: Optimization StrategiesHow CDNs Work: Edge Delivery, Caching & PerformanceHTTP Caching Deep Dive: Cache-Control, ETag & RevalidationService Workers & Offline Strategy: Cache First, Network First & Update LifecyclePWA Fundamentals: Manifest, Installability & Offline UXCritical Rendering PathScript Loading: async vs deferEvent Loop: Understanding JavaScript Execution ModelJavaScript Module Systems: CJS vs ESM vs UMDDynamic Module Loading: import() FunctionImport on Interaction: Load When User InteractsImport on Visibility: Lazy Loading with IntersectionObserverBrowser Rendering Pipeline & Layout ThrashingRendering Strategies: CSR vs SSR vs SSG vs ISRStreaming SSR: Progressive HTML StreamingIslands Architecture: Independent Component HydrationReact Server Components: Zero-JS Server RenderingFramework Reactivity: React, Vue, Svelte & SolidHTTP/1.1 vs HTTP/2 vs HTTP/3 (QUIC) for Frontend PerformanceDNS Resolution: Path, TTL, Caching & Frontend ImpactCross-Site Scripting (XSS) AttacksCross-Site Request Forgery (CSRF) AttacksCORS Explained: Cross-Origin Resource SharingCORS Preflight in Practice: Credentials, Simple Requests & MisconfigurationsContent Security Policy (CSP)Why is HTTPS Secure? Understanding TLS/SSLAuthorization Best PracticesCookie Security & Session Hardening: SameSite, HttpOnly, Secure
mediumFrontend Architecture

API Design Best Practices: Pagination, Errors, Versioning & Type Safety

TL;DRGood APIs are stable, predictable, and easy to evolve. Prioritize cursor pagination, actionable errors, explicit versioning, and type safety.
High Signal
Google
Meta
Netflix
Agoda
30-Second Answerstart every interview with this

Great API design focuses on consumer experience, long-term maintainability, and safe evolution. Key areas include pagination strategy, meaningful error responses, versioning approach, and type safety between frontend and backend.

Pagination = how you serve large orders efficiently. Error handling = clear communication when something goes wrong. Versioning = updating the menu without confusing regular customers. Type safety = ensuring the kitchen and waiter always speak the same language.

Define Clear Contract
Implement Pagination & Errors
Version Safely
Add Type Safety

1Pagination Strategies

Offset-based for page navigation (admin tools). Cursor-based for infinite scroll and timelines (more stable under inserts/deletes).

2Error Response Design

Always return structured errors with machine-readable codes, human messages, and field-level details. Use standard HTTP status codes appropriately.

3API Versioning

URL path versioning is most explicit. Header versioning keeps URLs clean. Plan deprecation paths from day one.

4Type Safety Approaches

OpenAPI/Swagger for broad compatibility. tRPC for full-stack TypeScript. GraphQL for flexible, self-documenting contracts.

PropertyOffset PaginationCursor Pagination
Use CaseAdmin panels, page numbersInfinite scroll, timelines
StabilityLow (shifts on inserts)High
ComplexityLowMedium

Offset Pagination

Use Case

Admin panels, page numbers

Stability

Low (shifts on inserts)

Complexity

Low

Cursor Pagination

Use Case

Infinite scroll, timelines

Stability

High

Complexity

Medium

Common questions

  • ›“How do you design pagination for a large list?”
  • ›“What makes a good error response?”
  • ›“How should you version APIs?”
  • ›“How do you ensure type safety between frontend and backend?”

What interviewers look for

  • Understanding of cursor vs offset trade-offs
  • Focus on actionable, consistent errors
  • Awareness of versioning strategies and deprecation
  • Practical type safety solutions (OpenAPI, tRPC, etc.)

Short answer (60 sec)

Use cursor-based pagination for infinite scroll and offset for page navigation. Return structured errors with codes and details. Version explicitly (URL path is clearest). Use OpenAPI or tRPC for type safety.

Detailed answer (senior level)

Well-designed APIs prioritize consumer ergonomics and safe evolution. Cursor pagination avoids instability in dynamic lists. Errors should be machine-readable and actionable. Versioning should be planned early with clear deprecation. Strong type safety (via OpenAPI or tRPC) reduces integration bugs and improves developer experience.

  • Using offset pagination for infinite scroll
  • Returning vague or inconsistent error messages
  • No versioning strategy until breaking changes occur
  • Manually syncing types between frontend and backend
  • Over-fetching or chatty endpoints
Key Takeaways
  • ✓Choose pagination strategy based on UX (cursor for infinite scroll)
  • ✓Design clear, actionable error responses with codes
  • ✓Plan API versioning and deprecation from the start
  • ✓Invest in type safety (OpenAPI, tRPC, or GraphQL)
  • ✓Keep APIs predictable and easy to evolve
  • ✓Balance flexibility with operational simplicity
  • ✓Good APIs make frontend development faster and safer
Previous TopicData Normalization: Organizing State for PerformanceNext Topic API Versioning Strategies for Frontend Compatibility

On this page