System Design: Client-Server Fundamentals

Master the underlying network protocols, request-response lifecycles, transport layers, and API communication paradigms that power modern distributed web applications.

Client-Server Architecture and the Request-Response Cycle

Client-server architecture partitions tasks between service providers called servers and service requesters called clients. In web engineering, clients are typically browsers, mobile applications, or third-party API consumers, while servers are specialized compute instances executing business logic and managing data persistence.

Every interaction begins with a request sent by the client over a network connection. The server processes this request, validates incoming parameters, queries databases or external services, and returns a response packet containing status codes, headers, and payload data. This exchange operates synchronously or asynchronously depending on the underlying transport layer.

`Phases of the Request-Response Cycle`

When a user types a URL or triggers an API call, several distinct network operations occur in strict sequence before bytes appear on screen:

1. Name Resolution:The client converts the domain name into an IP address using local cache or recursive DNS queries.
2. Connection Establishment:The client opens a socket connection to the target server IP and port via TCP handshake.
3. Security Handshake:If TLS is configured, client and server negotiate cryptographic ciphers and exchange certificate validation keys.
4. Payload Transmission:The HTTP request header and payload travel across network routers to the destination server.
5. Server Execution & Response:The server dispatches the request to an application worker, builds the output document, and returns HTTP status 200 along with response payload.

End-to-End Client-Server Pipeline Flow

Client-Server Flow

System design diagram illustrating client DNS lookup, TCP/TLS handshake, web proxy termination, and backend service dispatch.

100%

Loading system design canvas…

[
  {
    "id": "client-node",
    "type": "rectangle",
    "x": 40,
    "y": 150,
    "width": 150,
    "height": 80,
    "strokeColor": "#3b82f6",
    "backgroundColor": "#eff6ff",
    "fillStyle": "solid",
    "strokeWidth": 2,
    "strokeStyle": "solid",
    "roughness": 0,
    "opacity": 100,
    "roundness": {
      "type": 3
    },
    "seed": 4001,
    "version": 1,
    "versionNonce": 1,
    "isDeleted": false,
    "boundElements": [
      {
        "type": "text",
        "id": "client-text"
      }
    ]
  },
  {
    "id": "client-text",
    "type": "text",
    "x": 50,
    "y": 173.75,
    "width": 130,
    "height": 32.5,
    "strokeColor": "#1e40af",
    "backgroundColor": "transparent",
    "fillStyle": "solid",
    "strokeWidth": 1,
    "strokeStyle": "solid",
    "roughness": 0,
    "opacity": 100,
    "seed": 4002,
    "version": 1,
    "versionNonce": 1,
    "isDeleted": false,
    "text": "Client Browser\n(HTTP / TLS Request)",
    "fontSize": 13,
    "fontFamily": 5,
    "textAlign": "center",
    "verticalAlign": "middle",
    "originalText": "Client Browser\n(HTTP / TLS Request)",
    "containerId": "client-node"
  },
  {
    "id": "arrow-client-dns",
    "type": "arrow",
    "x": 190,
    "y": 170,
    "width": 70,
    "height": -60,
    "strokeColor": "#64748b",
    "backgroundColor": "transparent",
    "fillStyle": "solid",
    "strokeWidth": 2,
    "strokeStyle": "solid",
    "roughness": 0,
    "opacity": 100,
    "points": [
      [
        0,
        0
      ],
      [
        70,
        -60
      ]
    ],
    "endArrowhead": "arrow",
    "seed": 4003,
    "version": 1,
    "versionNonce": 1,
    "isDeleted": false
  },
  {
    "id": "dns-node",
    "type": "rectangle",
    "x": 260,
    "y": 65,
    "width": 150,
    "height": 70,
    "strokeColor": "#f59e0b",
    "backgroundColor": "#fffbe6",
    "fillStyle": "solid",
    "strokeWidth": 2,
    "strokeStyle": "solid",
    "roughness": 0,
    "opacity": 100,
    "roundness": {
      "type": 3
    },
    "seed": 4004,
    "version": 1,
    "versionNonce": 1,
    "isDeleted": false,
    "boundElements": [
      {
        "type": "text",
        "id": "dns-text"
      }
    ]
  },
  {
    "id": "dns-text",
    "type": "text",
    "x": 270,
    "y": 83.75,
    "width": 130,
    "height": 32.5,
    "strokeColor": "#92400e",
    "backgroundColor": "transparent",
    "fillStyle": "solid",
    "strokeWidth": 1,
    "strokeStyle": "solid",
    "roughness": 0,
    "opacity": 100,
    "seed": 4005,
    "version": 1,
    "versionNonce": 1,
    "isDeleted": false,
    "text": "DNS Resolver\n(Resolves IP)",
    "fontSize": 13,
    "fontFamily": 5,
    "textAlign": "center",
    "verticalAlign": "middle",
    "originalText": "DNS Resolver\n(Resolves IP)",
    "containerId": "dns-node"
  },
  {
    "id": "arrow-client-gateway",
    "type": "arrow",
    "x": 190,
    "y": 200,
    "width": 70,
    "height": 30,
    "strokeColor": "#64748b",
    "backgroundColor": "transparent",
    "fillStyle": "solid",
    "strokeWidth": 2,
    "strokeStyle": "solid",
    "roughness": 0,
    "opacity": 100,
    "points": [
      [
        0,
        0
      ],
      [
        70,
        30
      ]
    ],
    "endArrowhead": "arrow",
    "seed": 4006,
    "version": 1,
    "versionNonce": 1,
    "isDeleted": false
  },
  {
    "id": "server-node",
    "type": "rectangle",
    "x": 260,
    "y": 200,
    "width": 160,
    "height": 80,
    "strokeColor": "#8b4dde",
    "backgroundColor": "#f3e8ff",
    "fillStyle": "solid",
    "strokeWidth": 2,
    "strokeStyle": "solid",
    "roughness": 0,
    "opacity": 100,
    "roundness": {
      "type": 3
    },
    "seed": 4007,
    "version": 1,
    "versionNonce": 1,
    "isDeleted": false,
    "boundElements": [
      {
        "type": "text",
        "id": "server-text"
      }
    ]
  },
  {
    "id": "server-text",
    "type": "text",
    "x": 270,
    "y": 225,
    "width": 140,
    "height": 30,
    "strokeColor": "#6b21a8",
    "backgroundColor": "transparent",
    "fillStyle": "solid",
    "strokeWidth": 1,
    "strokeStyle": "solid",
    "roughness": 0,
    "opacity": 100,
    "seed": 4008,
    "version": 1,
    "versionNonce": 1,
    "isDeleted": false,
    "text": "Web Server / Proxy\n(Port 443 / TLS)",
    "fontSize": 12,
    "fontFamily": 5,
    "textAlign": "center",
    "verticalAlign": "middle",
    "originalText": "Web Server / Proxy\n(Port 443 / TLS)",
    "containerId": "server-node"
  },
  {
    "id": "arrow-server-app",
    "type": "arrow",
    "x": 420,
    "y": 240,
    "width": 80,
    "height": 0,
    "strokeColor": "#64748b",
    "backgroundColor": "transparent",
    "fillStyle": "solid",
    "strokeWidth": 2,
    "strokeStyle": "solid",
    "roughness": 0,
    "opacity": 100,
    "points": [
      [
        0,
        0
      ],
      [
        80,
        0
      ]
    ],
    "endArrowhead": "arrow",
    "seed": 4009,
    "version": 1,
    "versionNonce": 1,
    "isDeleted": false
  },
  {
    "id": "app-node",
    "type": "rectangle",
    "x": 500,
    "y": 200,
    "width": 160,
    "height": 80,
    "strokeColor": "#10b981",
    "backgroundColor": "#ecfdf5",
    "fillStyle": "solid",
    "strokeWidth": 2,
    "strokeStyle": "solid",
    "roughness": 0,
    "opacity": 100,
    "roundness": {
      "type": 3
    },
    "seed": 4010,
    "version": 1,
    "versionNonce": 1,
    "isDeleted": false,
    "boundElements": [
      {
        "type": "text",
        "id": "app-text"
      }
    ]
  },
  {
    "id": "app-text",
    "type": "text",
    "x": 510,
    "y": 225,
    "width": 140,
    "height": 30,
    "strokeColor": "#065f46",
    "backgroundColor": "transparent",
    "fillStyle": "solid",
    "strokeWidth": 1,
    "strokeStyle": "solid",
    "roughness": 0,
    "opacity": 100,
    "seed": 4011,
    "version": 1,
    "versionNonce": 1,
    "isDeleted": false,
    "text": "Backend Service\n(REST / gRPC)",
    "fontSize": 12,
    "fontFamily": 5,
    "textAlign": "center",
    "verticalAlign": "middle",
    "originalText": "Backend Service\n(REST / gRPC)",
    "containerId": "app-node"
  }
]

DNS Resolution, IP Addressing, and Network Ports

Computers on a network communicate through numerical IP addresses (IPv4 like 192.0.2.1 or IPv6 like 2001:db8::1). Because human users remember domain names rather than hex strings, the Domain Name System (DNS) operates as a globally distributed database translating human-readable hostnames into network addresses.

DNS resolution uses a hierarchical lookup chain. When a client requests a domain, the resolution flows through four server layers: local browser cache, recursive resolver (provided by an ISP or public DNS like 1.1.1.1), root name servers, TLD (Top-Level Domain) name servers, and finally authoritative name servers holding the canonical DNS records.

`Essential Network Primitives`

A & AAAA Records:A maps hostnames to 32-bit IPv4 addresses; AAAA maps hostnames to 128-bit IPv6 addresses.
CNAME Records:Canonical Name aliases one domain to another domain name, enabling flexible server routing without changing IP targets.
IP Ports:Numerical endpoints (0 to 65535) on an IP host. Port 80 defaults to unencrypted HTTP; port 443 defaults to encrypted HTTPS; port 5432 defaults to PostgreSQL.
Sockets:An active network connection defined by a source IP, source port, destination IP, and destination port combination.

Hierarchical DNS Resolution Architecture Flow

DNS Flow

Visual flow depicting client query dispatched to Recursive Resolver, Root Server, TLD Server, and Authoritative DNS.

100%

Loading system design canvas…

[
  {
    "id": "dns-client",
    "type": "rectangle",
    "x": 40,
    "y": 140,
    "width": 130,
    "height": 70,
    "strokeColor": "#3b82f6",
    "backgroundColor": "#eff6ff",
    "fillStyle": "solid",
    "strokeWidth": 2,
    "strokeStyle": "solid",
    "roughness": 0,
    "opacity": 100,
    "roundness": {
      "type": 3
    },
    "seed": 4101,
    "version": 1,
    "versionNonce": 1,
    "isDeleted": false,
    "boundElements": [
      {
        "type": "text",
        "id": "dns-client-text"
      }
    ]
  },
  {
    "id": "dns-client-text",
    "type": "text",
    "x": 50,
    "y": 160,
    "width": 110,
    "height": 30,
    "strokeColor": "#1e40af",
    "backgroundColor": "transparent",
    "fillStyle": "solid",
    "strokeWidth": 1,
    "strokeStyle": "solid",
    "roughness": 0,
    "opacity": 100,
    "seed": 4102,
    "version": 1,
    "versionNonce": 1,
    "isDeleted": false,
    "text": "Client Browser\nQuery example.com",
    "fontSize": 12,
    "fontFamily": 5,
    "textAlign": "center",
    "verticalAlign": "middle",
    "originalText": "Client Browser\nQuery example.com",
    "containerId": "dns-client"
  },
  {
    "id": "arrow-dns1",
    "type": "arrow",
    "x": 170,
    "y": 175,
    "width": 60,
    "height": 0,
    "strokeColor": "#64748b",
    "backgroundColor": "transparent",
    "fillStyle": "solid",
    "strokeWidth": 2,
    "strokeStyle": "solid",
    "roughness": 0,
    "opacity": 100,
    "points": [
      [
        0,
        0
      ],
      [
        60,
        0
      ]
    ],
    "endArrowhead": "arrow",
    "seed": 4103,
    "version": 1,
    "versionNonce": 1,
    "isDeleted": false
  },
  {
    "id": "dns-recursive",
    "type": "rectangle",
    "x": 230,
    "y": 140,
    "width": 140,
    "height": 70,
    "strokeColor": "#f59e0b",
    "backgroundColor": "#fffbe6",
    "fillStyle": "solid",
    "strokeWidth": 2,
    "strokeStyle": "solid",
    "roughness": 0,
    "opacity": 100,
    "roundness": {
      "type": 3
    },
    "seed": 4104,
    "version": 1,
    "versionNonce": 1,
    "isDeleted": false,
    "boundElements": [
      {
        "type": "text",
        "id": "dns-recursive-text"
      }
    ]
  },
  {
    "id": "dns-recursive-text",
    "type": "text",
    "x": 240,
    "y": 160,
    "width": 120,
    "height": 30,
    "strokeColor": "#92400e",
    "backgroundColor": "transparent",
    "fillStyle": "solid",
    "strokeWidth": 1,
    "strokeStyle": "solid",
    "roughness": 0,
    "opacity": 100,
    "seed": 4105,
    "version": 1,
    "versionNonce": 1,
    "isDeleted": false,
    "text": "Recursive Resolver\n(8.8.8.8 / 1.1.1.1)",
    "fontSize": 12,
    "fontFamily": 5,
    "textAlign": "center",
    "verticalAlign": "middle",
    "originalText": "Recursive Resolver\n(8.8.8.8 / 1.1.1.1)",
    "containerId": "dns-recursive"
  },
  {
    "id": "arrow-dns2",
    "type": "arrow",
    "x": 370,
    "y": 150,
    "width": 70,
    "height": -80,
    "strokeColor": "#64748b",
    "backgroundColor": "transparent",
    "fillStyle": "solid",
    "strokeWidth": 2,
    "strokeStyle": "solid",
    "roughness": 0,
    "opacity": 100,
    "points": [
      [
        0,
        0
      ],
      [
        70,
        -80
      ]
    ],
    "endArrowhead": "arrow",
    "seed": 4106,
    "version": 1,
    "versionNonce": 1,
    "isDeleted": false
  },
  {
    "id": "dns-root",
    "type": "rectangle",
    "x": 440,
    "y": 40,
    "width": 140,
    "height": 60,
    "strokeColor": "#8b4dde",
    "backgroundColor": "#f3e8ff",
    "fillStyle": "solid",
    "strokeWidth": 2,
    "strokeStyle": "solid",
    "roughness": 0,
    "opacity": 100,
    "roundness": {
      "type": 3
    },
    "seed": 4107,
    "version": 1,
    "versionNonce": 1,
    "isDeleted": false,
    "boundElements": [
      {
        "type": "text",
        "id": "dns-root-text"
      }
    ]
  },
  {
    "id": "dns-root-text",
    "type": "text",
    "x": 450,
    "y": 56.25,
    "width": 120,
    "height": 27.5,
    "strokeColor": "#6b21a8",
    "backgroundColor": "transparent",
    "fillStyle": "solid",
    "strokeWidth": 1,
    "strokeStyle": "solid",
    "roughness": 0,
    "opacity": 100,
    "seed": 4108,
    "version": 1,
    "versionNonce": 1,
    "isDeleted": false,
    "text": "Root Server (.)\nPoints to .com TLD",
    "fontSize": 11,
    "fontFamily": 5,
    "textAlign": "center",
    "verticalAlign": "middle",
    "originalText": "Root Server (.)\nPoints to .com TLD",
    "containerId": "dns-root"
  },
  {
    "id": "arrow-dns3",
    "type": "arrow",
    "x": 370,
    "y": 175,
    "width": 70,
    "height": 0,
    "strokeColor": "#64748b",
    "backgroundColor": "transparent",
    "fillStyle": "solid",
    "strokeWidth": 2,
    "strokeStyle": "solid",
    "roughness": 0,
    "opacity": 100,
    "points": [
      [
        0,
        0
      ],
      [
        70,
        0
      ]
    ],
    "endArrowhead": "arrow",
    "seed": 4109,
    "version": 1,
    "versionNonce": 1,
    "isDeleted": false
  },
  {
    "id": "dns-tld",
    "type": "rectangle",
    "x": 440,
    "y": 145,
    "width": 140,
    "height": 60,
    "strokeColor": "#8b4dde",
    "backgroundColor": "#f3e8ff",
    "fillStyle": "solid",
    "strokeWidth": 2,
    "strokeStyle": "solid",
    "roughness": 0,
    "opacity": 100,
    "roundness": {
      "type": 3
    },
    "seed": 4110,
    "version": 1,
    "versionNonce": 1,
    "isDeleted": false,
    "boundElements": [
      {
        "type": "text",
        "id": "dns-tld-text"
      }
    ]
  },
  {
    "id": "dns-tld-text",
    "type": "text",
    "x": 450,
    "y": 161.25,
    "width": 120,
    "height": 27.5,
    "strokeColor": "#6b21a8",
    "backgroundColor": "transparent",
    "fillStyle": "solid",
    "strokeWidth": 1,
    "strokeStyle": "solid",
    "roughness": 0,
    "opacity": 100,
    "seed": 4111,
    "version": 1,
    "versionNonce": 1,
    "isDeleted": false,
    "text": "TLD Server (.com)\nPoints to NS Server",
    "fontSize": 11,
    "fontFamily": 5,
    "textAlign": "center",
    "verticalAlign": "middle",
    "originalText": "TLD Server (.com)\nPoints to NS Server",
    "containerId": "dns-tld"
  },
  {
    "id": "arrow-dns4",
    "type": "arrow",
    "x": 370,
    "y": 200,
    "width": 70,
    "height": 70,
    "strokeColor": "#64748b",
    "backgroundColor": "transparent",
    "fillStyle": "solid",
    "strokeWidth": 2,
    "strokeStyle": "solid",
    "roughness": 0,
    "opacity": 100,
    "points": [
      [
        0,
        0
      ],
      [
        70,
        70
      ]
    ],
    "endArrowhead": "arrow",
    "seed": 4112,
    "version": 1,
    "versionNonce": 1,
    "isDeleted": false
  },
  {
    "id": "dns-authoritative",
    "type": "rectangle",
    "x": 440,
    "y": 250,
    "width": 150,
    "height": 60,
    "strokeColor": "#10b981",
    "backgroundColor": "#ecfdf5",
    "fillStyle": "solid",
    "strokeWidth": 2,
    "strokeStyle": "solid",
    "roughness": 0,
    "opacity": 100,
    "roundness": {
      "type": 3
    },
    "seed": 4113,
    "version": 1,
    "versionNonce": 1,
    "isDeleted": false,
    "boundElements": [
      {
        "type": "text",
        "id": "dns-auth-text"
      }
    ]
  },
  {
    "id": "dns-auth-text",
    "type": "text",
    "x": 450,
    "y": 266.25,
    "width": 130,
    "height": 27.5,
    "strokeColor": "#065f46",
    "backgroundColor": "transparent",
    "fillStyle": "solid",
    "strokeWidth": 1,
    "strokeStyle": "solid",
    "roughness": 0,
    "opacity": 100,
    "seed": 4114,
    "version": 1,
    "versionNonce": 1,
    "isDeleted": false,
    "text": "Authoritative DNS\nReturns 192.0.2.1",
    "fontSize": 11,
    "fontFamily": 5,
    "textAlign": "center",
    "verticalAlign": "middle",
    "originalText": "Authoritative DNS\nReturns 192.0.2.1",
    "containerId": "dns-authoritative"
  }
]

The OSI Model, TCP, and UDP

The Open Systems Interconnection (OSI) model standardizes network communication into seven conceptual layers: Physical (Layer 1), Data Link (Layer 2), Network (Layer 3), Transport (Layer 4), Session (Layer 5), Presentation (Layer 6), and Application (Layer 7). In modern web design, developers interact primarily with Layer 4 (Transport) and Layer 7 (Application).

Feature	TCP (Transmission Control Protocol)	UDP (User Datagram Protocol)
Connection State	Connection-oriented (requires 3-way handshake)	Connectionless (sends packets immediately)
Reliability	Guaranteed delivery with packet retransmission	No delivery guarantee (packets may drop)
Ordering	Strict sequence preservation via sequence numbers	No ordering guarantees (packets can arrive out of order)
Header Overhead	20 to 60 bytes header size	8 bytes lightweight header size
Flow & Congestion Control	Yes (sliding window algorithms, slow start)	No (sender controls speed independently)
Typical Use Cases	HTTP/HTTPS, Database connections, SSH, gRPC	Video streaming, VoIP, Online multiplayer gaming, DNS queries

`TCP Three-Way Handshake`

Before any application data travels over TCP, client and server exchange three control packets to synchronize sequence numbers:

1. SYN:Client sends a segment with SYN flag set and an initial sequence number x.
2. SYN-ACK:Server acknowledges with ACK number x+1, SYN flag set, and server initial sequence number y.
3. ACK:Client responds with ACK number y+1. The full-duplex TCP socket is now connected and ready for HTTP payload data.

TCP 3-Way Handshake Connection Flow

TCP Flow

Diagram depicting state transitions and packet sequence exchanges between Client and Server sockets.

100%

Loading system design canvas…

[
  {
    "id": "tcp-client-head",
    "type": "rectangle",
    "x": 60,
    "y": 40,
    "width": 160,
    "height": 45,
    "strokeColor": "#3b82f6",
    "backgroundColor": "#eff6ff",
    "fillStyle": "solid",
    "strokeWidth": 2,
    "strokeStyle": "solid",
    "roughness": 0,
    "opacity": 100,
    "roundness": {
      "type": 3
    },
    "seed": 4201,
    "version": 1,
    "versionNonce": 1,
    "isDeleted": false,
    "boundElements": [
      {
        "type": "text",
        "id": "tcp-client-head-text"
      }
    ]
  },
  {
    "id": "tcp-client-head-text",
    "type": "text",
    "x": 70,
    "y": 52.5,
    "width": 140,
    "height": 20,
    "strokeColor": "#1e40af",
    "backgroundColor": "transparent",
    "fillStyle": "solid",
    "strokeWidth": 1,
    "strokeStyle": "solid",
    "roughness": 0,
    "opacity": 100,
    "seed": 4202,
    "version": 1,
    "versionNonce": 1,
    "isDeleted": false,
    "text": "Client Socket",
    "fontSize": 13,
    "fontFamily": 5,
    "textAlign": "center",
    "verticalAlign": "middle",
    "originalText": "Client Socket",
    "containerId": "tcp-client-head"
  },
  {
    "id": "tcp-server-head",
    "type": "rectangle",
    "x": 480,
    "y": 40,
    "width": 160,
    "height": 45,
    "strokeColor": "#10b981",
    "backgroundColor": "#ecfdf5",
    "fillStyle": "solid",
    "strokeWidth": 2,
    "strokeStyle": "solid",
    "roughness": 0,
    "opacity": 100,
    "roundness": {
      "type": 3
    },
    "seed": 4203,
    "version": 1,
    "versionNonce": 1,
    "isDeleted": false,
    "boundElements": [
      {
        "type": "text",
        "id": "tcp-server-head-text"
      }
    ]
  },
  {
    "id": "tcp-server-head-text",
    "type": "text",
    "x": 490,
    "y": 52.5,
    "width": 140,
    "height": 20,
    "strokeColor": "#065f46",
    "backgroundColor": "transparent",
    "fillStyle": "solid",
    "strokeWidth": 1,
    "strokeStyle": "solid",
    "roughness": 0,
    "opacity": 100,
    "seed": 4204,
    "version": 1,
    "versionNonce": 1,
    "isDeleted": false,
    "text": "Server Socket",
    "fontSize": 13,
    "fontFamily": 5,
    "textAlign": "center",
    "verticalAlign": "middle",
    "originalText": "Server Socket",
    "containerId": "tcp-server-head"
  },
  {
    "id": "tcp-state-syn-sent",
    "type": "rectangle",
    "x": 60,
    "y": 110,
    "width": 160,
    "height": 40,
    "strokeColor": "#8b4dde",
    "backgroundColor": "#f3e8ff",
    "fillStyle": "solid",
    "strokeWidth": 1,
    "strokeStyle": "solid",
    "roughness": 0,
    "opacity": 100,
    "roundness": {
      "type": 3
    },
    "seed": 4205,
    "version": 1,
    "versionNonce": 1,
    "isDeleted": false,
    "boundElements": [
      {
        "type": "text",
        "id": "tcp-state-syn-sent-text"
      }
    ]
  },
  {
    "id": "tcp-state-syn-sent-text",
    "type": "text",
    "x": 70,
    "y": 121,
    "width": 140,
    "height": 18,
    "strokeColor": "#6b21a8",
    "backgroundColor": "transparent",
    "fillStyle": "solid",
    "strokeWidth": 1,
    "strokeStyle": "solid",
    "roughness": 0,
    "opacity": 100,
    "seed": 4206,
    "version": 1,
    "versionNonce": 1,
    "isDeleted": false,
    "text": "State: SYN_SENT",
    "fontSize": 12,
    "fontFamily": 5,
    "textAlign": "center",
    "verticalAlign": "middle",
    "originalText": "State: SYN_SENT",
    "containerId": "tcp-state-syn-sent"
  },
  {
    "id": "arrow-syn",
    "type": "arrow",
    "x": 220,
    "y": 130,
    "width": 260,
    "height": 0,
    "strokeColor": "#8b4dde",
    "backgroundColor": "transparent",
    "fillStyle": "solid",
    "strokeWidth": 2,
    "strokeStyle": "solid",
    "roughness": 0,
    "opacity": 100,
    "points": [
      [
        0,
        0
      ],
      [
        260,
        0
      ]
    ],
    "endArrowhead": "arrow",
    "seed": 4207,
    "version": 1,
    "versionNonce": 1,
    "isDeleted": false
  },
  {
    "id": "box-syn-label",
    "type": "rectangle",
    "x": 245,
    "y": 112,
    "width": 210,
    "height": 34,
    "strokeColor": "#8b4dde",
    "backgroundColor": "#ffffff",
    "fillStyle": "solid",
    "strokeWidth": 1,
    "strokeStyle": "solid",
    "roughness": 0,
    "opacity": 100,
    "roundness": {
      "type": 3
    },
    "seed": 4208,
    "version": 1,
    "versionNonce": 1,
    "isDeleted": false,
    "boundElements": [
      {
        "type": "text",
        "id": "text-syn-label"
      }
    ]
  },
  {
    "id": "text-syn-label",
    "type": "text",
    "x": 255,
    "y": 120,
    "width": 190,
    "height": 18,
    "strokeColor": "#6b21a8",
    "backgroundColor": "transparent",
    "fillStyle": "solid",
    "strokeWidth": 1,
    "strokeStyle": "solid",
    "roughness": 0,
    "opacity": 100,
    "seed": 4209,
    "version": 1,
    "versionNonce": 1,
    "isDeleted": false,
    "text": "1. SYN (seq=x)",
    "fontSize": 12,
    "fontFamily": 5,
    "textAlign": "center",
    "verticalAlign": "middle",
    "originalText": "1. SYN (seq=x)",
    "containerId": "box-syn-label"
  },
  {
    "id": "tcp-state-syn-rcvd",
    "type": "rectangle",
    "x": 480,
    "y": 175,
    "width": 160,
    "height": 40,
    "strokeColor": "#f59e0b",
    "backgroundColor": "#fffbe6",
    "fillStyle": "solid",
    "strokeWidth": 1,
    "strokeStyle": "solid",
    "roughness": 0,
    "opacity": 100,
    "roundness": {
      "type": 3
    },
    "seed": 4210,
    "version": 1,
    "versionNonce": 1,
    "isDeleted": false,
    "boundElements": [
      {
        "type": "text",
        "id": "tcp-state-syn-rcvd-text"
      }
    ]
  },
  {
    "id": "tcp-state-syn-rcvd-text",
    "type": "text",
    "x": 490,
    "y": 186,
    "width": 140,
    "height": 18,
    "strokeColor": "#92400e",
    "backgroundColor": "transparent",
    "fillStyle": "solid",
    "strokeWidth": 1,
    "strokeStyle": "solid",
    "roughness": 0,
    "opacity": 100,
    "seed": 4211,
    "version": 1,
    "versionNonce": 1,
    "isDeleted": false,
    "text": "State: SYN_RCVD",
    "fontSize": 12,
    "fontFamily": 5,
    "textAlign": "center",
    "verticalAlign": "middle",
    "originalText": "State: SYN_RCVD",
    "containerId": "tcp-state-syn-rcvd"
  },
  {
    "id": "arrow-synack",
    "type": "arrow",
    "x": 480,
    "y": 195,
    "width": -260,
    "height": 0,
    "strokeColor": "#f59e0b",
    "backgroundColor": "transparent",
    "fillStyle": "solid",
    "strokeWidth": 2,
    "strokeStyle": "solid",
    "roughness": 0,
    "opacity": 100,
    "points": [
      [
        0,
        0
      ],
      [
        -260,
        0
      ]
    ],
    "endArrowhead": "arrow",
    "seed": 4212,
    "version": 1,
    "versionNonce": 1,
    "isDeleted": false
  },
  {
    "id": "box-synack-label",
    "type": "rectangle",
    "x": 235,
    "y": 177,
    "width": 230,
    "height": 34,
    "strokeColor": "#f59e0b",
    "backgroundColor": "#ffffff",
    "fillStyle": "solid",
    "strokeWidth": 1,
    "strokeStyle": "solid",
    "roughness": 0,
    "opacity": 100,
    "roundness": {
      "type": 3
    },
    "seed": 4213,
    "version": 1,
    "versionNonce": 1,
    "isDeleted": false,
    "boundElements": [
      {
        "type": "text",
        "id": "text-synack-label"
      }
    ]
  },
  {
    "id": "text-synack-label",
    "type": "text",
    "x": 245,
    "y": 185,
    "width": 210,
    "height": 18,
    "strokeColor": "#92400e",
    "backgroundColor": "transparent",
    "fillStyle": "solid",
    "strokeWidth": 1,
    "strokeStyle": "solid",
    "roughness": 0,
    "opacity": 100,
    "seed": 4214,
    "version": 1,
    "versionNonce": 1,
    "isDeleted": false,
    "text": "2. SYN-ACK (seq=y, ack=x+1)",
    "fontSize": 11,
    "fontFamily": 5,
    "textAlign": "center",
    "verticalAlign": "middle",
    "originalText": "2. SYN-ACK (seq=y, ack=x+1)",
    "containerId": "box-synack-label"
  },
  {
    "id": "tcp-client-est",
    "type": "rectangle",
    "x": 60,
    "y": 240,
    "width": 160,
    "height": 40,
    "strokeColor": "#10b981",
    "backgroundColor": "#ecfdf5",
    "fillStyle": "solid",
    "strokeWidth": 1,
    "strokeStyle": "solid",
    "roughness": 0,
    "opacity": 100,
    "roundness": {
      "type": 3
    },
    "seed": 4215,
    "version": 1,
    "versionNonce": 1,
    "isDeleted": false,
    "boundElements": [
      {
        "type": "text",
        "id": "tcp-client-est-text"
      }
    ]
  },
  {
    "id": "tcp-client-est-text",
    "type": "text",
    "x": 70,
    "y": 251,
    "width": 140,
    "height": 18,
    "strokeColor": "#065f46",
    "backgroundColor": "transparent",
    "fillStyle": "solid",
    "strokeWidth": 1,
    "strokeStyle": "solid",
    "roughness": 0,
    "opacity": 100,
    "seed": 4216,
    "version": 1,
    "versionNonce": 1,
    "isDeleted": false,
    "text": "ESTABLISHED",
    "fontSize": 12,
    "fontFamily": 5,
    "textAlign": "center",
    "verticalAlign": "middle",
    "originalText": "ESTABLISHED",
    "containerId": "tcp-client-est"
  },
  {
    "id": "tcp-server-est",
    "type": "rectangle",
    "x": 480,
    "y": 240,
    "width": 160,
    "height": 40,
    "strokeColor": "#10b981",
    "backgroundColor": "#ecfdf5",
    "fillStyle": "solid",
    "strokeWidth": 1,
    "strokeStyle": "solid",
    "roughness": 0,
    "opacity": 100,
    "roundness": {
      "type": 3
    },
    "seed": 4217,
    "version": 1,
    "versionNonce": 1,
    "isDeleted": false,
    "boundElements": [
      {
        "type": "text",
        "id": "tcp-server-est-text"
      }
    ]
  },
  {
    "id": "tcp-server-est-text",
    "type": "text",
    "x": 490,
    "y": 251,
    "width": 140,
    "height": 18,
    "strokeColor": "#065f46",
    "backgroundColor": "transparent",
    "fillStyle": "solid",
    "strokeWidth": 1,
    "strokeStyle": "solid",
    "roughness": 0,
    "opacity": 100,
    "seed": 4218,
    "version": 1,
    "versionNonce": 1,
    "isDeleted": false,
    "text": "ESTABLISHED",
    "fontSize": 12,
    "fontFamily": 5,
    "textAlign": "center",
    "verticalAlign": "middle",
    "originalText": "ESTABLISHED",
    "containerId": "tcp-server-est"
  },
  {
    "id": "arrow-ack",
    "type": "arrow",
    "x": 220,
    "y": 260,
    "width": 260,
    "height": 0,
    "strokeColor": "#10b981",
    "backgroundColor": "transparent",
    "fillStyle": "solid",
    "strokeWidth": 2,
    "strokeStyle": "solid",
    "roughness": 0,
    "opacity": 100,
    "points": [
      [
        0,
        0
      ],
      [
        260,
        0
      ]
    ],
    "endArrowhead": "arrow",
    "seed": 4219,
    "version": 1,
    "versionNonce": 1,
    "isDeleted": false
  },
  {
    "id": "box-ack-label",
    "type": "rectangle",
    "x": 245,
    "y": 242,
    "width": 210,
    "height": 34,
    "strokeColor": "#10b981",
    "backgroundColor": "#ffffff",
    "fillStyle": "solid",
    "strokeWidth": 1,
    "strokeStyle": "solid",
    "roughness": 0,
    "opacity": 100,
    "roundness": {
      "type": 3
    },
    "seed": 4220,
    "version": 1,
    "versionNonce": 1,
    "isDeleted": false,
    "boundElements": [
      {
        "type": "text",
        "id": "text-ack-label"
      }
    ]
  },
  {
    "id": "text-ack-label",
    "type": "text",
    "x": 255,
    "y": 250,
    "width": 190,
    "height": 18,
    "strokeColor": "#065f46",
    "backgroundColor": "transparent",
    "fillStyle": "solid",
    "strokeWidth": 1,
    "strokeStyle": "solid",
    "roughness": 0,
    "opacity": 100,
    "seed": 4221,
    "version": 1,
    "versionNonce": 1,
    "isDeleted": false,
    "text": "3. ACK (ack=y+1)",
    "fontSize": 12,
    "fontFamily": 5,
    "textAlign": "center",
    "verticalAlign": "middle",
    "originalText": "3. ACK (ack=y+1)",
    "containerId": "box-ack-label"
  }
]

TLS/SSL Handshake and Encryption in Transit

Transport Layer Security (TLS), the successor to Secure Sockets Layer (SSL), encrypts traffic between client and server to prevent eavesdropping, tampering, and message forgery. HTTPS is simply standard HTTP traffic operating inside an encrypted TLS session.

Modern TLS 1.3 optimizes the connection setup. While TLS 1.2 required two full network round trips (2-RTT) to negotiate cryptographic keys, TLS 1.3 completes the entire handshake in a single round trip (1-RTT). It achieves this by combining key exchange algorithms (such as Diffie-Hellman) with certificate authentication in the initial ClientHello exchange.

`TLS 1.3 Key Exchange Steps`

ClientHello:Client sends supported cipher suites, key share parameters, and Server Name Indication (SNI).
ServerHello & Certificate:Server chooses the cipher suite, provides its public key share, presents its X.509 digital certificate signed by a trusted Certificate Authority (CA), and proves ownership via a digital signature.
Symmetric Secret Derivation:Both sides independently derive matching session encryption keys. Application data payload transmission begins immediately using AES-GCM or ChaCha20-Poly1305 symmetric ciphers.

TLS 1.3 1-RTT Handshake Sequence Flow

TLS Flow

Architecture flow illustrating key share negotiation, certificate verification, and symmetric secret derivation.

100%

Loading system design canvas…

[
  {
    "id": "tls-client-head",
    "type": "rectangle",
    "x": 60,
    "y": 40,
    "width": 160,
    "height": 45,
    "strokeColor": "#3b82f6",
    "backgroundColor": "#eff6ff",
    "fillStyle": "solid",
    "strokeWidth": 2,
    "strokeStyle": "solid",
    "roughness": 0,
    "opacity": 100,
    "roundness": {
      "type": 3
    },
    "seed": 4301,
    "version": 1,
    "versionNonce": 1,
    "isDeleted": false,
    "boundElements": [
      {
        "type": "text",
        "id": "tls-client-head-text"
      }
    ]
  },
  {
    "id": "tls-client-head-text",
    "type": "text",
    "x": 70,
    "y": 52.5,
    "width": 140,
    "height": 20,
    "strokeColor": "#1e40af",
    "backgroundColor": "transparent",
    "fillStyle": "solid",
    "strokeWidth": 1,
    "strokeStyle": "solid",
    "roughness": 0,
    "opacity": 100,
    "seed": 4302,
    "version": 1,
    "versionNonce": 1,
    "isDeleted": false,
    "text": "Client Browser",
    "fontSize": 13,
    "fontFamily": 5,
    "textAlign": "center",
    "verticalAlign": "middle",
    "originalText": "Client Browser",
    "containerId": "tls-client-head"
  },
  {
    "id": "tls-server-head",
    "type": "rectangle",
    "x": 480,
    "y": 40,
    "width": 160,
    "height": 45,
    "strokeColor": "#10b981",
    "backgroundColor": "#ecfdf5",
    "fillStyle": "solid",
    "strokeWidth": 2,
    "strokeStyle": "solid",
    "roughness": 0,
    "opacity": 100,
    "roundness": {
      "type": 3
    },
    "seed": 4303,
    "version": 1,
    "versionNonce": 1,
    "isDeleted": false,
    "boundElements": [
      {
        "type": "text",
        "id": "tls-server-head-text"
      }
    ]
  },
  {
    "id": "tls-server-head-text",
    "type": "text",
    "x": 490,
    "y": 52.5,
    "width": 140,
    "height": 20,
    "strokeColor": "#065f46",
    "backgroundColor": "transparent",
    "fillStyle": "solid",
    "strokeWidth": 1,
    "strokeStyle": "solid",
    "roughness": 0,
    "opacity": 100,
    "seed": 4304,
    "version": 1,
    "versionNonce": 1,
    "isDeleted": false,
    "text": "Web Server",
    "fontSize": 13,
    "fontFamily": 5,
    "textAlign": "center",
    "verticalAlign": "middle",
    "originalText": "Web Server",
    "containerId": "tls-server-head"
  },
  {
    "id": "tls-step1-client",
    "type": "rectangle",
    "x": 60,
    "y": 110,
    "width": 160,
    "height": 40,
    "strokeColor": "#3b82f6",
    "backgroundColor": "#eff6ff",
    "fillStyle": "solid",
    "strokeWidth": 1,
    "strokeStyle": "solid",
    "roughness": 0,
    "opacity": 100,
    "roundness": {
      "type": 3
    },
    "seed": 4305,
    "version": 1,
    "versionNonce": 1,
    "isDeleted": false,
    "boundElements": [
      {
        "type": "text",
        "id": "tls-step1-client-text"
      }
    ]
  },
  {
    "id": "tls-step1-client-text",
    "type": "text",
    "x": 70,
    "y": 121,
    "width": 140,
    "height": 18,
    "strokeColor": "#1e40af",
    "backgroundColor": "transparent",
    "fillStyle": "solid",
    "strokeWidth": 1,
    "strokeStyle": "solid",
    "roughness": 0,
    "opacity": 100,
    "seed": 4306,
    "version": 1,
    "versionNonce": 1,
    "isDeleted": false,
    "text": "Generate Key Share",
    "fontSize": 11,
    "fontFamily": 5,
    "textAlign": "center",
    "verticalAlign": "middle",
    "originalText": "Generate Key Share",
    "containerId": "tls-step1-client"
  },
  {
    "id": "arrow-clienthello",
    "type": "arrow",
    "x": 220,
    "y": 130,
    "width": 260,
    "height": 0,
    "strokeColor": "#3b82f6",
    "backgroundColor": "transparent",
    "fillStyle": "solid",
    "strokeWidth": 2,
    "strokeStyle": "solid",
    "roughness": 0,
    "opacity": 100,
    "points": [
      [
        0,
        0
      ],
      [
        260,
        0
      ]
    ],
    "endArrowhead": "arrow",
    "seed": 4307,
    "version": 1,
    "versionNonce": 1,
    "isDeleted": false
  },
  {
    "id": "box-clienthello-label",
    "type": "rectangle",
    "x": 230,
    "y": 112,
    "width": 240,
    "height": 34,
    "strokeColor": "#3b82f6",
    "backgroundColor": "#ffffff",
    "fillStyle": "solid",
    "strokeWidth": 1,
    "strokeStyle": "solid",
    "roughness": 0,
    "opacity": 100,
    "roundness": {
      "type": 3
    },
    "seed": 4308,
    "version": 1,
    "versionNonce": 1,
    "isDeleted": false,
    "boundElements": [
      {
        "type": "text",
        "id": "text-clienthello-label"
      }
    ]
  },
  {
    "id": "text-clienthello-label",
    "type": "text",
    "x": 240,
    "y": 120,
    "width": 220,
    "height": 18,
    "strokeColor": "#1e40af",
    "backgroundColor": "transparent",
    "fillStyle": "solid",
    "strokeWidth": 1,
    "strokeStyle": "solid",
    "roughness": 0,
    "opacity": 100,
    "seed": 4309,
    "version": 1,
    "versionNonce": 1,
    "isDeleted": false,
    "text": "1. ClientHello + Key Share + SNI",
    "fontSize": 11,
    "fontFamily": 5,
    "textAlign": "center",
    "verticalAlign": "middle",
    "originalText": "1. ClientHello + Key Share + SNI",
    "containerId": "box-clienthello-label"
  },
  {
    "id": "tls-step2-server",
    "type": "rectangle",
    "x": 480,
    "y": 175,
    "width": 160,
    "height": 40,
    "strokeColor": "#10b981",
    "backgroundColor": "#ecfdf5",
    "fillStyle": "solid",
    "strokeWidth": 1,
    "strokeStyle": "solid",
    "roughness": 0,
    "opacity": 100,
    "roundness": {
      "type": 3
    },
    "seed": 4310,
    "version": 1,
    "versionNonce": 1,
    "isDeleted": false,
    "boundElements": [
      {
        "type": "text",
        "id": "tls-step2-server-text"
      }
    ]
  },
  {
    "id": "tls-step2-server-text",
    "type": "text",
    "x": 490,
    "y": 186,
    "width": 140,
    "height": 18,
    "strokeColor": "#065f46",
    "backgroundColor": "transparent",
    "fillStyle": "solid",
    "strokeWidth": 1,
    "strokeStyle": "solid",
    "roughness": 0,
    "opacity": 100,
    "seed": 4311,
    "version": 1,
    "versionNonce": 1,
    "isDeleted": false,
    "text": "Derive Session Secret",
    "fontSize": 11,
    "fontFamily": 5,
    "textAlign": "center",
    "verticalAlign": "middle",
    "originalText": "Derive Session Secret",
    "containerId": "tls-step2-server"
  },
  {
    "id": "arrow-serverhello",
    "type": "arrow",
    "x": 480,
    "y": 195,
    "width": -260,
    "height": 0,
    "strokeColor": "#10b981",
    "backgroundColor": "transparent",
    "fillStyle": "solid",
    "strokeWidth": 2,
    "strokeStyle": "solid",
    "roughness": 0,
    "opacity": 100,
    "points": [
      [
        0,
        0
      ],
      [
        -260,
        0
      ]
    ],
    "endArrowhead": "arrow",
    "seed": 4312,
    "version": 1,
    "versionNonce": 1,
    "isDeleted": false
  },
  {
    "id": "box-serverhello-label",
    "type": "rectangle",
    "x": 230,
    "y": 177,
    "width": 240,
    "height": 34,
    "strokeColor": "#10b981",
    "backgroundColor": "#ffffff",
    "fillStyle": "solid",
    "strokeWidth": 1,
    "strokeStyle": "solid",
    "roughness": 0,
    "opacity": 100,
    "roundness": {
      "type": 3
    },
    "seed": 4313,
    "version": 1,
    "versionNonce": 1,
    "isDeleted": false,
    "boundElements": [
      {
        "type": "text",
        "id": "text-serverhello-label"
      }
    ]
  },
  {
    "id": "text-serverhello-label",
    "type": "text",
    "x": 240,
    "y": 185,
    "width": 220,
    "height": 18,
    "strokeColor": "#065f46",
    "backgroundColor": "transparent",
    "fillStyle": "solid",
    "strokeWidth": 1,
    "strokeStyle": "solid",
    "roughness": 0,
    "opacity": 100,
    "seed": 4314,
    "version": 1,
    "versionNonce": 1,
    "isDeleted": false,
    "text": "2. ServerHello + Cert + Key Share",
    "fontSize": 11,
    "fontFamily": 5,
    "textAlign": "center",
    "verticalAlign": "middle",
    "originalText": "2. ServerHello + Cert + Key Share",
    "containerId": "box-serverhello-label"
  },
  {
    "id": "tls-client-ready",
    "type": "rectangle",
    "x": 60,
    "y": 240,
    "width": 160,
    "height": 40,
    "strokeColor": "#8b4dde",
    "backgroundColor": "#f3e8ff",
    "fillStyle": "solid",
    "strokeWidth": 1,
    "strokeStyle": "solid",
    "roughness": 0,
    "opacity": 100,
    "roundness": {
      "type": 3
    },
    "seed": 4315,
    "version": 1,
    "versionNonce": 1,
    "isDeleted": false,
    "boundElements": [
      {
        "type": "text",
        "id": "tls-client-ready-text"
      }
    ]
  },
  {
    "id": "tls-client-ready-text",
    "type": "text",
    "x": 70,
    "y": 251,
    "width": 140,
    "height": 18,
    "strokeColor": "#6b21a8",
    "backgroundColor": "transparent",
    "fillStyle": "solid",
    "strokeWidth": 1,
    "strokeStyle": "solid",
    "roughness": 0,
    "opacity": 100,
    "seed": 4316,
    "version": 1,
    "versionNonce": 1,
    "isDeleted": false,
    "text": "Session Key Ready",
    "fontSize": 11,
    "fontFamily": 5,
    "textAlign": "center",
    "verticalAlign": "middle",
    "originalText": "Session Key Ready",
    "containerId": "tls-client-ready"
  },
  {
    "id": "tls-server-ready",
    "type": "rectangle",
    "x": 480,
    "y": 240,
    "width": 160,
    "height": 40,
    "strokeColor": "#8b4dde",
    "backgroundColor": "#f3e8ff",
    "fillStyle": "solid",
    "strokeWidth": 1,
    "strokeStyle": "solid",
    "roughness": 0,
    "opacity": 100,
    "roundness": {
      "type": 3
    },
    "seed": 4317,
    "version": 1,
    "versionNonce": 1,
    "isDeleted": false,
    "boundElements": [
      {
        "type": "text",
        "id": "tls-server-ready-text"
      }
    ]
  },
  {
    "id": "tls-server-ready-text",
    "type": "text",
    "x": 490,
    "y": 251,
    "width": 140,
    "height": 18,
    "strokeColor": "#6b21a8",
    "backgroundColor": "transparent",
    "fillStyle": "solid",
    "strokeWidth": 1,
    "strokeStyle": "solid",
    "roughness": 0,
    "opacity": 100,
    "seed": 4318,
    "version": 1,
    "versionNonce": 1,
    "isDeleted": false,
    "text": "Session Key Ready",
    "fontSize": 11,
    "fontFamily": 5,
    "textAlign": "center",
    "verticalAlign": "middle",
    "originalText": "Session Key Ready",
    "containerId": "tls-server-ready"
  },
  {
    "id": "arrow-encrypted-data",
    "type": "arrow",
    "x": 220,
    "y": 260,
    "width": 260,
    "height": 0,
    "strokeColor": "#8b4dde",
    "backgroundColor": "transparent",
    "fillStyle": "solid",
    "strokeWidth": 2,
    "strokeStyle": "solid",
    "roughness": 0,
    "opacity": 100,
    "points": [
      [
        0,
        0
      ],
      [
        260,
        0
      ]
    ],
    "endArrowhead": "arrow",
    "seed": 4319,
    "version": 1,
    "versionNonce": 1,
    "isDeleted": false
  },
  {
    "id": "box-encrypted-data-label",
    "type": "rectangle",
    "x": 230,
    "y": 242,
    "width": 240,
    "height": 34,
    "strokeColor": "#8b4dde",
    "backgroundColor": "#ffffff",
    "fillStyle": "solid",
    "strokeWidth": 1,
    "strokeStyle": "solid",
    "roughness": 0,
    "opacity": 100,
    "roundness": {
      "type": 3
    },
    "seed": 4320,
    "version": 1,
    "versionNonce": 1,
    "isDeleted": false,
    "boundElements": [
      {
        "type": "text",
        "id": "text-encrypted-data-label"
      }
    ]
  },
  {
    "id": "text-encrypted-data-label",
    "type": "text",
    "x": 240,
    "y": 250,
    "width": 220,
    "height": 18,
    "strokeColor": "#6b21a8",
    "backgroundColor": "transparent",
    "fillStyle": "solid",
    "strokeWidth": 1,
    "strokeStyle": "solid",
    "roughness": 0,
    "opacity": 100,
    "seed": 4321,
    "version": 1,
    "versionNonce": 1,
    "isDeleted": false,
    "text": "3. Encrypted Application Data (1-RTT)",
    "fontSize": 11,
    "fontFamily": 5,
    "textAlign": "center",
    "verticalAlign": "middle",
    "originalText": "3. Encrypted Application Data (1-RTT)",
    "containerId": "box-encrypted-data-label"
  }
]

HTTP Protocol Evolution: HTTP/1.1, HTTP/2, and HTTP/3

Hypertext Transfer Protocol (HTTP) has evolved significantly over three decades to meet the performance requirements of modern web scale. Understanding how each protocol version manages transport connections helps software engineers optimize front-end assets and API performance.

`Comparing HTTP Generations`

HTTP/1.1 (1997):Text-based protocol. Introduced persistent TCP connections (Keep-Alive) and pipelining. Suffixes from head-of-line (HOL) blocking: if a single slow request stalls on a connection, subsequent requests behind it are delayed.
HTTP/2 (2015):Binary framing protocol. Introduced multiplexing over a single TCP connection, HPACK header compression, and server push. Eliminates HTTP-level head-of-line blocking, though packet loss at the TCP layer can still stall all multiplexed streams.
HTTP/3 (2020+):Replaces TCP with QUIC (a UDP-based transport protocol with integrated encryption). Eliminates TCP-level head-of-line blocking entirely: packet loss on one stream does not impact independent parallel streams on the same connection.

HTTP Protocol Framing & Transport Evolution Flow

HTTP Evolution Flow

Diagram comparing HTTP/1.1 connection queueing, HTTP/2 binary multiplexing, and HTTP/3 QUIC over UDP.

100%

Loading system design canvas…

[
  {
    "id": "J1dc9Bak79Xp7uyi7YKLU",
    "type": "rectangle",
    "x": 40,
    "y": 60,
    "width": 170,
    "height": 240,
    "angle": 0,
    "strokeColor": "#ef4444",
    "backgroundColor": "#fef2f2",
    "fillStyle": "solid",
    "strokeWidth": 2,
    "strokeStyle": "solid",
    "roughness": 0,
    "opacity": 100,
    "groupIds": [],
    "frameId": null,
    "index": "a0",
    "roundness": {
      "type": 3
    },
    "seed": 4401,
    "version": 2,
    "versionNonce": 1285057229,
    "isDeleted": false,
    "boundElements": [
      {
        "type": "text",
        "id": "G3PxduLv-sOFR0L88TvKS"
      }
    ],
    "updated": 1787733612993,
    "link": null,
    "locked": false
  },
  {
    "id": "G3PxduLv-sOFR0L88TvKS",
    "type": "text",
    "x": 50,
    "y": 157.5,
    "width": 150,
    "height": 45,
    "angle": 0,
    "strokeColor": "#991b1b",
    "backgroundColor": "transparent",
    "fillStyle": "solid",
    "strokeWidth": 1,
    "strokeStyle": "solid",
    "roughness": 0,
    "opacity": 100,
    "groupIds": [],
    "frameId": null,
    "index": "a1",
    "roundness": null,
    "seed": 4402,
    "version": 57,
    "versionNonce": 1026158164,
    "isDeleted": false,
    "boundElements": [],
    "updated": 1787733664400,
    "link": null,
    "locked": false,
    "text": "HTTP/1.1\nSequential TCP Conns\nHead-of-Line Blocking",
    "fontSize": 12,
    "fontFamily": 5,
    "textAlign": "center",
    "verticalAlign": "middle",
    "containerId": "J1dc9Bak79Xp7uyi7YKLU",
    "originalText": "HTTP/1.1\nSequential TCP Conns\nHead-of-Line Blocking",
    "autoResize": true,
    "lineHeight": 1.25
  },
  {
    "id": "J7uobO0EaflgLeyLEYiZw",
    "type": "rectangle",
    "x": 240,
    "y": 60,
    "width": 180,
    "height": 240,
    "angle": 0,
    "strokeColor": "#f59e0b",
    "backgroundColor": "#fffbe6",
    "fillStyle": "solid",
    "strokeWidth": 2,
    "strokeStyle": "solid",
    "roughness": 0,
    "opacity": 100,
    "groupIds": [],
    "frameId": null,
    "index": "a2",
    "roundness": {
      "type": 3
    },
    "seed": 4403,
    "version": 2,
    "versionNonce": 1765509421,
    "isDeleted": false,
    "boundElements": [
      {
        "type": "text",
        "id": "hhRF-XoWtxTioB_BDKRgm"
      }
    ],
    "updated": 1787733612993,
    "link": null,
    "locked": false
  },
  {
    "id": "hhRF-XoWtxTioB_BDKRgm",
    "type": "text",
    "x": 250,
    "y": 150,
    "width": 160,
    "height": 60,
    "angle": 0,
    "strokeColor": "#92400e",
    "backgroundColor": "transparent",
    "fillStyle": "solid",
    "strokeWidth": 1,
    "strokeStyle": "solid",
    "roughness": 0,
    "opacity": 100,
    "groupIds": [],
    "frameId": null,
    "index": "a3",
    "roundness": null,
    "seed": 4404,
    "version": 56,
    "versionNonce": 1607813740,
    "isDeleted": false,
    "boundElements": [],
    "updated": 1787733666971,
    "link": null,
    "locked": false,
    "text": "HTTP/2\nBinary Frames\n1 TCP Connection\nMultiplexed Streams",
    "fontSize": 12,
    "fontFamily": 5,
    "textAlign": "center",
    "verticalAlign": "middle",
    "containerId": "J7uobO0EaflgLeyLEYiZw",
    "originalText": "HTTP/2\nBinary Frames\n1 TCP Connection\nMultiplexed Streams",
    "autoResize": true,
    "lineHeight": 1.25
  },
  {
    "id": "La8Wn-58zfZQENrhRF0Vv",
    "type": "rectangle",
    "x": 450,
    "y": 60,
    "width": 180,
    "height": 240,
    "angle": 0,
    "strokeColor": "#10b981",
    "backgroundColor": "#ecfdf5",
    "fillStyle": "solid",
    "strokeWidth": 2,
    "strokeStyle": "solid",
    "roughness": 0,
    "opacity": 100,
    "groupIds": [],
    "frameId": null,
    "index": "a4",
    "roundness": {
      "type": 3
    },
    "seed": 4405,
    "version": 2,
    "versionNonce": 346807181,
    "isDeleted": false,
    "boundElements": [
      {
        "type": "text",
        "id": "PLRiT_a3vW4gu8oWbZCrv"
      }
    ],
    "updated": 1787733612993,
    "link": null,
    "locked": false
  },
  {
    "id": "PLRiT_a3vW4gu8oWbZCrv",
    "type": "text",
    "x": 460,
    "y": 150,
    "width": 160,
    "height": 60,
    "angle": 0,
    "strokeColor": "#065f46",
    "backgroundColor": "transparent",
    "fillStyle": "solid",
    "strokeWidth": 1,
    "strokeStyle": "solid",
    "roughness": 0,
    "opacity": 100,
    "groupIds": [],
    "frameId": null,
    "index": "a5",
    "roundness": null,
    "seed": 4406,
    "version": 62,
    "versionNonce": 2113652716,
    "isDeleted": false,
    "boundElements": [],
    "updated": 1787733671720,
    "link": null,
    "locked": false,
    "text": "HTTP/3\nQUIC over UDP\n0-RTT Connection\nNo TCP HOL Blocking",
    "fontSize": 12,
    "fontFamily": 5,
    "textAlign": "center",
    "verticalAlign": "middle",
    "containerId": "La8Wn-58zfZQENrhRF0Vv",
    "originalText": "HTTP/3\nQUIC over UDP\n0-RTT Connection\nNo TCP HOL Blocking",
    "autoResize": true,
    "lineHeight": 1.25
  }
]

API Paradigms: REST, gRPC, GraphQL, and WebSockets

Selecting the appropriate client-server communication style depends on data access patterns, latency bounds, payload serialization costs, and client types.

Paradigm	Data Transport	Primary Strengths	Ideal Use Case
REST	HTTP/1.1 or HTTP/2 + JSON/XML	Standardized CRUD semantics, strong browser support, straightforward HTTP caching	Public web APIs, standard web applications
gRPC	HTTP/2 + Protocol Buffers (Binary)	Ultra-low latency, strongly typed contracts (.proto), tiny binary payloads, streaming support	Internal microservice-to-microservice communication
GraphQL	HTTP + JSON (Single POST endpoint)	Client specifies exact fields needed; eliminates over-fetching and under-fetching	Complex mobile applications with diverse UI data views
WebSockets	TCP Socket (HTTP Upgrade)	Full-duplex, real-time bi-directional streaming over a persistent connection	Live chat applications, collaborative documents, stock updates

`Trade-offs Between API Styles`

No single API paradigm fits every service boundary:

Use REST when:You need wide compatibility, public accessibility, and standard HTTP response caching via CDNs.
Use gRPC when:You are building high-throughput microservices inside a backend cluster where minimal latency and strict type safety matter most.
Use GraphQL when:Front-end applications need custom data shapes from multiple relational tables in a single network round trip.
Use WebSockets when:Server-initiated pushes are frequent and establishing HTTP connections repeatedly incurs unacceptable handshake overhead.

API Paradigm Architecture Comparison Flow

API Paradigms Flow

System design diagram comparing REST, gRPC binary streams, GraphQL queries, and WebSockets full-duplex channels.

100%

Loading system design canvas…

[
  {
    "id": "jLqvJVykuyJs0aGUngTV4",
    "type": "rectangle",
    "x": 40,
    "y": 60,
    "width": 130,
    "height": 240,
    "angle": 0,
    "strokeColor": "#3b82f6",
    "backgroundColor": "#eff6ff",
    "fillStyle": "solid",
    "strokeWidth": 2,
    "strokeStyle": "solid",
    "roughness": 0,
    "opacity": 100,
    "groupIds": [],
    "frameId": null,
    "index": "a0",
    "roundness": {
      "type": 3
    },
    "seed": 4501,
    "version": 2,
    "versionNonce": 567248426,
    "isDeleted": false,
    "boundElements": [
      {
        "type": "text",
        "id": "qcRpcRcHqjEWqArVZAhmN"
      }
    ],
    "updated": 1787733714393,
    "link": null,
    "locked": false
  },
  {
    "id": "qcRpcRcHqjEWqArVZAhmN",
    "type": "text",
    "x": 50,
    "y": 152.5,
    "width": 110,
    "height": 55,
    "angle": 0,
    "strokeColor": "#1e40af",
    "backgroundColor": "transparent",
    "fillStyle": "solid",
    "strokeWidth": 1,
    "strokeStyle": "solid",
    "roughness": 0,
    "opacity": 100,
    "groupIds": [],
    "frameId": null,
    "index": "a1",
    "roundness": null,
    "seed": 4502,
    "version": 42,
    "versionNonce": 212243433,
    "isDeleted": false,
    "boundElements": [],
    "updated": 1787733785964,
    "link": null,
    "locked": false,
    "text": "REST\nGET /users/123\nJSON Payload\nHTTP Caching",
    "fontSize": 11,
    "fontFamily": 5,
    "textAlign": "center",
    "verticalAlign": "middle",
    "containerId": "jLqvJVykuyJs0aGUngTV4",
    "originalText": "REST\nGET /users/123\nJSON Payload\nHTTP Caching",
    "autoResize": true,
    "lineHeight": 1.25
  },
  {
    "id": "k7BDrXDKXpYRXvSNvJT8W",
    "type": "rectangle",
    "x": 189.65217922044837,
    "y": 59.652165951936155,
    "width": 130,
    "height": 240,
    "angle": 0,
    "strokeColor": "#10b981",
    "backgroundColor": "#ecfdf5",
    "fillStyle": "solid",
    "strokeWidth": 2,
    "strokeStyle": "solid",
    "roughness": 0,
    "opacity": 100,
    "groupIds": [],
    "frameId": null,
    "index": "a2",
    "roundness": {
      "type": 3
    },
    "seed": 4503,
    "version": 4,
    "versionNonce": 752900263,
    "isDeleted": false,
    "boundElements": [
      {
        "type": "text",
        "id": "dVFTxA1E2a-MjxrJb5-Lj"
      }
    ],
    "updated": 1787733847568,
    "link": null,
    "locked": false
  },
  {
    "id": "dVFTxA1E2a-MjxrJb5-Lj",
    "type": "text",
    "x": 199.65217922044837,
    "y": 152.15216595193615,
    "width": 110,
    "height": 55,
    "angle": 0,
    "strokeColor": "#065f46",
    "backgroundColor": "transparent",
    "fillStyle": "solid",
    "strokeWidth": 1,
    "strokeStyle": "solid",
    "roughness": 0,
    "opacity": 100,
    "groupIds": [],
    "frameId": null,
    "index": "a3",
    "roundness": null,
    "seed": 4504,
    "version": 46,
    "versionNonce": 1335391273,
    "isDeleted": false,
    "boundElements": [],
    "updated": 1787733789498,
    "link": null,
    "locked": false,
    "text": "gRPC\nHTTP/2 Streams\nProtobuf Binary\nMicroservices",
    "fontSize": 11,
    "fontFamily": 5,
    "textAlign": "center",
    "verticalAlign": "middle",
    "containerId": "k7BDrXDKXpYRXvSNvJT8W",
    "originalText": "gRPC\nHTTP/2 Streams\nProtobuf Binary\nMicroservices",
    "autoResize": true,
    "lineHeight": 1.25
  },
  {
    "id": "wHKFmO57AmaUSNYsEE4aj",
    "type": "rectangle",
    "x": 340,
    "y": 60,
    "width": 130,
    "height": 240,
    "angle": 0,
    "strokeColor": "#8b4dde",
    "backgroundColor": "#f3e8ff",
    "fillStyle": "solid",
    "strokeWidth": 2,
    "strokeStyle": "solid",
    "roughness": 0,
    "opacity": 100,
    "groupIds": [],
    "frameId": null,
    "index": "a4",
    "roundness": {
      "type": 3
    },
    "seed": 4505,
    "version": 2,
    "versionNonce": 743408554,
    "isDeleted": false,
    "boundElements": [
      {
        "type": "text",
        "id": "7TNWewwKCuYBg7zvu0xnd"
      }
    ],
    "updated": 1787733714393,
    "link": null,
    "locked": false
  },
  {
    "id": "7TNWewwKCuYBg7zvu0xnd",
    "type": "text",
    "x": 350,
    "y": 152.5,
    "width": 110,
    "height": 55,
    "angle": 0,
    "strokeColor": "#6b21a8",
    "backgroundColor": "transparent",
    "fillStyle": "solid",
    "strokeWidth": 1,
    "strokeStyle": "solid",
    "roughness": 0,
    "opacity": 100,
    "groupIds": [],
    "frameId": null,
    "index": "a5",
    "roundness": null,
    "seed": 4506,
    "version": 66,
    "versionNonce": 387174601,
    "isDeleted": false,
    "boundElements": [],
    "updated": 1787733793579,
    "link": null,
    "locked": false,
    "text": "GraphQL\nPOST /graphql\nSingle Endpoint\nFlexible Queries",
    "fontSize": 11,
    "fontFamily": 5,
    "textAlign": "center",
    "verticalAlign": "middle",
    "containerId": "wHKFmO57AmaUSNYsEE4aj",
    "originalText": "GraphQL\nPOST /graphql\nSingle Endpoint\nFlexible Queries",
    "autoResize": true,
    "lineHeight": 1.25
  },
  {
    "id": "aaBzj1oe_Cg7D77OYS9GF",
    "type": "rectangle",
    "x": 490,
    "y": 60,
    "width": 130,
    "height": 240,
    "angle": 0,
    "strokeColor": "#f59e0b",
    "backgroundColor": "#fffbe6",
    "fillStyle": "solid",
    "strokeWidth": 2,
    "strokeStyle": "solid",
    "roughness": 0,
    "opacity": 100,
    "groupIds": [],
    "frameId": null,
    "index": "a6",
    "roundness": {
      "type": 3
    },
    "seed": 4507,
    "version": 2,
    "versionNonce": 1471512170,
    "isDeleted": false,
    "boundElements": [
      {
        "type": "text",
        "id": "TfN1EesmFko2nOrafSio-"
      }
    ],
    "updated": 1787733714393,
    "link": null,
    "locked": false
  },
  {
    "id": "TfN1EesmFko2nOrafSio-",
    "type": "text",
    "x": 500,
    "y": 152.5,
    "width": 110,
    "height": 55,
    "angle": 0,
    "strokeColor": "#92400e",
    "backgroundColor": "transparent",
    "fillStyle": "solid",
    "strokeWidth": 1,
    "strokeStyle": "solid",
    "roughness": 0,
    "opacity": 100,
    "groupIds": [],
    "frameId": null,
    "index": "a7",
    "roundness": null,
    "seed": 4508,
    "version": 56,
    "versionNonce": 1972642249,
    "isDeleted": false,
    "boundElements": [],
    "updated": 1787733798678,
    "link": null,
    "locked": false,
    "text": "WebSockets\nws:// Connection\nFull-Duplex TCP\nReal-time Streams",
    "fontSize": 11,
    "fontFamily": 5,
    "textAlign": "center",
    "verticalAlign": "middle",
    "containerId": "aaBzj1oe_Cg7D77OYS9GF",
    "originalText": "WebSockets\nws:// Connection\nFull-Duplex TCP\nReal-time Streams",
    "autoResize": true,
    "lineHeight": 1.25
  },
  {
    "id": "wNwSV2ZywUS1Xf4guLlT9",
    "type": "image",
    "x": 221.77472740130062,
    "y": 80.49149338374289,
    "width": 78.26085629670519,
    "height": 78.26085629670519,
    "angle": 0,
    "strokeColor": "transparent",
    "backgroundColor": "transparent",
    "fillStyle": "solid",
    "strokeWidth": 2,
    "strokeStyle": "solid",
    "roughness": 1,
    "opacity": 100,
    "groupIds": [],
    "frameId": null,
    "index": "a8",
    "roundness": null,
    "seed": 924816775,
    "version": 178,
    "versionNonce": 1783346761,
    "isDeleted": false,
    "boundElements": null,
    "updated": 1787733832256,
    "link": null,
    "locked": false,
    "status": "pending",
    "fileId": "devora-icon-7c27034a-e2c1-452f-a894-2d62ed05d9c1",
    "scale": [
      1,
      1
    ],
    "crop": null
  },
  {
    "id": "cJNFf4X7Xjg5UYp9ssyPb",
    "type": "image",
    "x": 70.81821362327764,
    "y": 80.49148674948681,
    "width": 76.17391171662706,
    "height": 76.17391171662706,
    "angle": 0,
    "strokeColor": "transparent",
    "backgroundColor": "transparent",
    "fillStyle": "solid",
    "strokeWidth": 2,
    "strokeStyle": "solid",
    "roughness": 1,
    "opacity": 100,
    "groupIds": [],
    "frameId": null,
    "index": "a9",
    "roundness": null,
    "seed": 819193065,
    "version": 159,
    "versionNonce": 1805422889,
    "isDeleted": false,
    "boundElements": null,
    "updated": 1787733838787,
    "link": null,
    "locked": false,
    "status": "pending",
    "fileId": "devora-icon-212ee7ae-306b-4e53-8818-51ec1a681f44",
    "scale": [
      1,
      1
    ],
    "crop": null
  },
  {
    "id": "zuaCGx7AsB1_B2hK5f42X",
    "type": "image",
    "x": 378.06964996857107,
    "y": 88.49150399855279,
    "width": 57.739111858865414,
    "height": 57.739111858865414,
    "angle": 0,
    "strokeColor": "transparent",
    "backgroundColor": "transparent",
    "fillStyle": "solid",
    "strokeWidth": 2,
    "strokeStyle": "solid",
    "roughness": 1,
    "opacity": 100,
    "groupIds": [],
    "frameId": null,
    "index": "aA",
    "roundness": null,
    "seed": 278602791,
    "version": 127,
    "versionNonce": 2069535049,
    "isDeleted": false,
    "boundElements": null,
    "updated": 1787733855050,
    "link": null,
    "locked": false,
    "status": "pending",
    "fileId": "devora-icon-a74df876-e3ad-4c3c-b382-4d9f91da6826",
    "scale": [
      1,
      1
    ],
    "crop": null
  }
]

Knowledge Check

1. What happens during a DNS lookup when visiting a web page?

2. Which network protocol layer does HTTP operate on in the OSI model?

3. What is the primary difference between TCP and UDP?

4. Why does HTTP/2 offer better performance than HTTP/1.1 over high-latency networks?

5. When should a developer choose WebSockets over traditional HTTP polling?