Back
Web Fundamentals

Data Fetching Patterns: REST, GraphQL, tRPC & Real-time

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

Data Fetching Patterns: REST, GraphQL, tRPC & Real-time

TL;DRREST for simplicity • GraphQL for flexibility • tRPC for full-stack TS • WebSockets/SSE for real-time.
High Signal
Google
Meta
Netflix
Agoda
30-Second Answerstart every interview with this

Modern apps choose between REST (resource-based), GraphQL (client-shaped queries), tRPC (type-safe RPC), and real-time solutions (WebSockets/SSE) based on data complexity, freshness requirements, and developer experience.

REST = ordering individual dishes from a menu. GraphQL = customizing your meal exactly how you want. tRPC = ordering from your favorite local chef who knows you well. Real-time = the waiter keeps bringing updates as new dishes are ready.

REST

Resource endpoints

GraphQL

Client-defined queries

tRPC: Type-safe procedures
Real-time: Push updates

1REST

Resource-based architecture using standard HTTP methods. Simple, cacheable, and widely understood, but can lead to over/under-fetching.

2GraphQL

Client requests exactly the data needed in one query. Excellent for complex data relationships and multiple clients, but adds schema and resolver complexity.

3tRPC & gRPC-Web

tRPC provides end-to-end type safety for full-stack TypeScript. gRPC-Web offers efficient protobuf contracts for polyglot backends.

4Real-time Strategies

Polling for simplicity, WebSockets for bidirectional, SSE for server-push. Choose based on freshness needs and complexity tolerance.

PropertyRESTGraphQLtRPC
CachingExcellent (HTTP)ChallengingGood
Best ForCRUD, public APIsComplex data needsFull-stack TypeScript apps
ComplexityLowMediumLow
FlexibilityMediumVery HighHigh (TS-focused)

REST

Caching

Excellent (HTTP)

Best For

CRUD, public APIs

Complexity

Low

Flexibility

Medium

GraphQL

Caching

Challenging

Best For

Complex data needs

Complexity

Medium

Flexibility

Very High

tRPC

Caching

Good

Best For

Full-stack TypeScript apps

Complexity

Low

Flexibility

High (TS-focused)

Common questions

  • ›“When would you choose GraphQL over REST?”
  • ›“What are the trade-offs of real-time data fetching?”
  • ›“How does tRPC compare to GraphQL?”
  • ›“How do you handle optimistic updates?”

What interviewers look for

  • Clear reasoning based on data shape and freshness needs
  • Understanding of over/under-fetching and caching
  • Knowledge of optimistic vs pessimistic updates
  • Practical architecture thinking

Short answer (60 sec)

REST for simple CRUD with good caching. GraphQL for complex, flexible queries. tRPC for type-safe full-stack TypeScript. Use real-time (WebSockets/SSE) when freshness is critical.

Detailed answer (senior level)

Choose based on needs: REST is simple and cache-friendly. GraphQL eliminates over/under-fetching but adds complexity. tRPC gives excellent DX in TS apps. Real-time solutions (WebSockets for bidirectional, SSE for push) are for live data. Combine with optimistic updates for great perceived performance.

  • Using GraphQL for simple CRUD apps
  • Over-fetching with REST without proper caching
  • Ignoring N+1 problems in GraphQL
  • Polling when WebSockets/SSE would be better
  • Not separating client vs server state concerns
Key Takeaways
  • ✓Match fetching strategy to data shape and freshness needs
  • ✓REST: Simple, cacheable, widely understood
  • ✓GraphQL: Flexible queries, single endpoint
  • ✓tRPC: Best end-to-end TypeScript experience
  • ✓Real-time: WebSockets for bidirectional, SSE for push
  • ✓Optimistic updates improve perceived performance
  • ✓Always consider caching, error handling, and loading states
Previous TopicReact Query (TanStack Query): Server State CachingNext Topic GraphQL Fundamentals for Frontend: Shape, Caching, and Tradeoffs

On this page