TOPIC #3Beginner 8 min read

Request/Response Lifecycle (Browser → Server → DB)

CSD
CompleteSystemDesign Editorial
Report an issue
Key takeawayCore Architecture Summary

Trace the complete end-to-end journey of a single network packet from user click to database row mutation and DOM re-render.

Key Glossary Concepts in this TopicAll Glossary Terms
Interactive Lab · ⏳ Request Latency BudgetFull lab guide

Request Lifecycle Latency Budget

Browser → DNS → TCP/TLS → Edge → LB → App → Cache/DB → Render: toggle each optimization and watch the total.

Cold first request215.0 ms
warm repeat visit: 60.0 ms
DNS (cold)75.0 ms

Full recursive resolution Root → TLD → Authoritative adds ~75 ms.

TCP handshake40.0 ms

SYN → SYN-ACK → ACK costs 1 RTT (40 ms). Keep-alive amortizes it to 0.

TLS 1.3 handshake40.0 ms

TLS 1.3 folds the key share into ClientHello: 1 RTT.

Edge CDN / WAF8.0 ms

TLS termination, DDoS rate-limit rules, and header inspection at the PoP.

L7 Load Balancer6.0 ms

Path routing (/api → Orders fleet) plus X-Request-ID injection.

App server18.0 ms

JWT validation + business logic. Crypto already offloaded at the edge (frees 10–30% CPU).

PostgreSQL query12.0 ms

Cache MISS: pooled connection executes an indexed read in ~12 ms.

Response (gzip)0.0 ms

50 KB JSON compresses to 8.0 KB — 0.1 ms saved on a 5 Mbps link.

Browser render16.0 ms

DOM + CSSOM → Layout → Paint within one 16 ms frame (60 FPS budget).

NetworkSecurity/EdgeComputeStorage

Complete Request/Response Lifecycle 🔄

Multi-hop journey of a request traversing DNS, CDN, Load Balancer, Gateway, App Server, and DB.

Complete Request/Response Lifecycle 🔄
100%
Touchpad: Pinch to zoom • Drag to pan
Rendering visual architecture flowchart...

01.Phase 1: Client Preparation & DNS Resolution

When a user interacts with a web client:

  1. The browser checks local caches (Browser cache → OS cache → Router cache).
  2. If not cached, it queries the Recursive DNS Resolver to resolve api.example.com into an IPv4 (93.184.216.34) or IPv6 address.
  3. The browser opens a TCP connection (SYN, SYN-ACK, ACK) and negotiates TLS encryption.

Typical latency breakdown for a cold request with zero caching:

  • Browser DNS cache miss: +0ms (instant)
  • OS/Router DNS cache miss → ISP recursive resolver: +5–20ms
  • Full recursive DNS resolution (root → TLD → authoritative): +50–100ms
  • TCP handshake RTT: +10–100ms depending on geographic distance
  • TLS 1.3 handshake: +1 RTT on top of TCP (~10–100ms additional)

This means before a single byte of HTTP payload is transmitted, 50–300ms of overhead can accumulate on the very first connection.

02.Phase 2: Edge Ingress & Routing

The raw encrypted bytes hit the cloud provider or CDN Point of Presence (PoP):

  • WAF (Web Application Firewall): Inspects for SQLi, XSS, and bot traffic. Rate-limiting rules block IPs exceeding burst thresholds (e.g., >1000 req/min).
  • SSL Termination: Offloads heavy cryptographic handshakes at the edge. This saves app servers from RSA/ECDSA signature verification overhead — on high-traffic systems this frees 10–30% of app server CPU.
  • L7 Load Balancer: Evaluates path routing (e.g., /api/v1/orders → Orders Service Fleet). Can also insert tracing headers (X-Request-ID, traceparent) for distributed observability.

03.Phase 3: Application Server & Database Execution

The app server receives the stream:

  • Authentication middleware validates session tokens or JWT signatures (typically <1ms with cached public keys).
  • Business logic performs domain checks (e.g., inventory verification).
  • Redis cache is checked first: a cache HIT returns data in ~0.1–0.5ms, bypassing the database entirely.
  • On a cache MISS, a connection pool lends an established database connection (avoiding a fresh 1ms TCP handshake) to execute atomic SQL transactions (~2–20ms for indexed reads).
  • The server converts the database record into JSON and sends HTTP status 200 OK or 201 Created.

Total end-to-end latency budget for a typical cloud API:

  • DNS: 0ms (cached) – 100ms (cold)
  • TCP + TLS: 30ms – 200ms (cold), 0ms with keep-alive
  • CDN/LB forwarding: 5–15ms
  • App server processing: 5–50ms
  • Database query: 1–20ms (cached/indexed)
  • Total: ~50ms cached → 300ms+ cold first request

04.Phase 4: Response Path & Browser Rendering

The HTTP response travels back through the same layered path. Key optimizations on the return path:

  • Gzip/Brotli compression: Reduces JSON payload from 50KB to 8KB, saving ~20ms on a 5Mbps mobile connection.
  • HTTP/2 multiplexing: Multiple API responses can stream concurrently over a single TCP connection, eliminating head-of-line blocking between parallel resource fetches.
  • Cache-Control headers: Instructing browsers and CDNs to cache stable assets (max-age=31536000, immutable) eliminates entire round trips on repeat visits.
  • The browser parses the response, updates the DOM, triggers JavaScript callbacks, and repaints the UI within ~16ms per frame (60 FPS target).

Architectural Trade-offs & Production Realities

Architectural Advantages

  • Layered architecture provides separation of security, routing, and data tiers
  • Each layer can scale independently
  • CDN caching at the edge eliminates database load for static content

Trade-offs & Constraints

  • Every extra hop (CDN → LB → App → DB) adds 5-20ms of cumulative network latency
  • Debugging failures requires distributed tracing across multiple layers
  • Connection pooling adds configuration complexity
Production Implementation in Big Tech
Shopify• Flash Sale Checkout Lifecycle

During high-volume sales, Shopify terminates TLS at Cloudflare edge, routes through Envoy load balancers to Ruby on Rails pods, which interact with partitioned MySQL clusters and Redis queues.

Staff+ Engineering Takeaways

  • The request lifecycle involves Client, Network, Ingress, Compute, and Storage.
  • Edge caching stops requests before they ever hit your database.
  • Connection pooling avoids TCP handshake latency between app servers and databases.
  • Cold first requests can take 300ms+; warm cached requests can complete in <50ms.
  • Distributed tracing (OpenTelemetry) is essential to debug latency across all hops.

Topic Knowledge Check

Exercise 1 of 1 • Test your architectural comprehension.

Exercise 1 of 10 answered
1

What is the primary benefit of SSL/TLS termination at the Load Balancer or Edge CDN?

Rate This Architecture ChapterFeedback & Rating

How clear and actionable was this distributed systems breakdown?

Interactive Engineering Workbenches: