11001

Networking

What is HTTP? Communication protocol between client and server (IP/ TCP)

300 - redirect

400 code - client error response

OSI model/ networking

5. Caching

  • Browser cache - reduces redundant requests

  • Cache-Control: max-age, no-cache, no-store

  • ETag - conditional requests (If-None-Match)

  • React: Affects asset loading, API responses

6. Cookies vs Headers

Cookies:

  • Auto-sent with every request to same domain

  • Size limit ~4KB per cookie

  • HttpOnly, Secure, SameSite flags

Headers:

  • Manually set per request

  • Larger payload capacity

  • JWT typically in Authorization header: Bearer <token>

7. HTTPS

  • Encrypted HTTP over TLS/SSL

  • Required for: passwords, payment, modern APIs

  • Mixed content blocking - HTTPS pages can't load HTTP resources

  • Free certificates (Let's Encrypt)

9. Idempotency

  • Idempotent: Multiple identical requests = same result (GET, PUT, DELETE)

  • Non-idempotent: POST creates multiple resources

  • React: Matters for retry logic, preventing duplicate submissions

Each HTTP Request Has:

1. Request Line

  • Method (GET, POST, PUT, etc.)

  • URL/Path (/api/users)

  • HTTP Version (HTTP/1.1, HTTP/2)

2. Headers

  • Key-value pairs with metadata

  • Host, User-Agent, Content-Type, Authorization, etc.

3. Body (Optional)

  • Data payload

  • Only for POST, PUT, PATCH

  • GET, DELETE typically have no body

POST /api/users HTTP/1.1
Host: example.com
Content-Type: application/json
Authorization: Bearer token123
Content-Length: 27

{"name":"John","age":30}

Each HTTP Response Has:

1. Status Line

  • HTTP Version (HTTP/1.1, HTTP/2)

  • Status Code (200, 404, 500, etc.)

  • Status Text (OK, Not Found, Internal Server Error)

2. Headers

  • Key-value pairs with metadata

  • Content-Type, Content-Length, Set-Cookie, Cache-Control, etc.

3. Body (Optional)

  • Response data/payload

  • HTML, JSON, XML, files, etc.

  • Can be empty (e.g., 204 No Content, 304 Not Modified)

HTTP/1.1 200 OK
Content-Type: application/json
Content-Length: 27
Cache-Control: no-cache

{"name":"John","age":30}

1. Request Methods

  • GET - retrieve data (idempotent, cacheable)

  • POST - create resources, non-idempotent

  • PUT - replace entire resource

  • PATCH - partial update

  • DELETE - remove resource

  • OPTIONS - preflight requests (CORS)

4. CORS (Cross-Origin Resource Sharing)

  • Browsers block cross-origin requests by default

  • Backend must set Access-Control-Allow-* headers

  • Preflight OPTIONS request for non-simple requests

  • React impact: API calls to different domains require CORS configuration

HTTP/2 (2015)

  • Binary protocol instead of text

  • Multiplexing - multiple concurrent requests over single connection

  • Server push - proactively sends resources

  • Header compression (HPACK)

  • Stream prioritization

  • Still uses TCP, inherits its head-of-line blocking at transport layer

HTTP/3 (2022)

  • Built on QUIC protocol (UDP-based)

  • Eliminates TCP head-of-line blocking

  • Faster connection establishment (0-RTT)

  • Better mobile network handling

  • Connection migration (survives IP changes)

    TCP vs UDP

TCP (Transmission Control Protocol)

Connection-oriented - establishes connection before data transfer

Key characteristics:

  • Reliable delivery - guarantees all packets arrive in order

  • Error checking - retransmits lost/corrupted packets

  • Flow control - adjusts speed based on receiver capacity

  • Congestion control - slows down when network is busy

  • Overhead - handshake (3-way), acknowledgments, ordering

Slower but guaranteed

UDP (User Datagram Protocol)

Connectionless - fire-and-forget approach

Key characteristics:

  • No delivery guarantee - packets may be lost, duplicated, or arrive out of order

  • No error recovery - sender doesn't know if data arrived

  • No flow/congestion control

  • Minimal overhead - just sends packets

Faster but unreliable

When Each Is Used

TCP:

  • HTTP/1.1, HTTP/2

  • File transfers (FTP)

  • Email (SMTP, IMAP)

  • SSH, databases

  • Your React apps (traditional fetch/axios requests)

UDP:

  • Video streaming (YouTube, Netflix)

  • Video calls (Zoom, WebRTC)

  • Online gaming

  • DNS lookups

  • HTTP/3 (QUIC protocol)

React Developer Context

WebSockets use TCP - reliable real-time communication

WebRTC uses UDP - prioritizes speed over reliability for video/audio

HTTP/3 uses QUIC (UDP-based) but adds reliability features at application layer, combining UDP speed with TCP-like guarantees