Web Fundamentals

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

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

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

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

Topic content

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.

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
PreviousNext

Topic Guide

On this page