Episode 1 — Fundamentals / 1.2 — Client Server Architecture

1.2 Client-Server Architecture — Quick Revision

Compact cheat sheet. Print-friendly.

How to use this material (instructions)

Skim top-to-bottom in one pass before interviews or exams.
If a row feels fuzzy — reopen the matching lesson: README.md → 1.2.a…1.2.g.
Drills — 1.2-Exercise-Questions.md.
Polished answers — 1.2-Interview-Questions.md.

1.2.a Client-Server Model

Core Concept

A distributed application structure that partitions tasks between providers (servers) and service requesters (clients).

┌──────────┐       Request (HTTP)      ┌──────────┐
│  Client  │ ────────────────────────> │  Server  │
│ (Browser)│ <──────────────────────── │ (Nginx)  │
└──────────┘       Response (HTML)     └──────────┘

Tiered Architectures

Tier	Description	Example
1-Tier	UI, Logic, and Data on one machine.	MS Access, SQLite local app.
2-Tier	Client (UI/Logic) + Database Server.	Legacy desktop ERP apps.
3-Tier	Client (UI) + App Server (Logic) + DB.	Standard modern web app.
N-Tier	Multiple layers (Cache, LB, Microservices).	Enterprise scale (Netflix, Amazon).

Client-Server vs P2P

Feature	Client-Server	Peer-to-Peer (P2P)
Role	Defined (Client vs Server)	Symmetric (Nodes are "servents")
Control	Centralized	Decentralized
Scalability	Vertical (bigger server)	Horizontal (more peers)
Example	Web browsing, Email	BitTorrent, Blockchain

1.2.b Client vs Server

The Client (Frontend)

Browser Internals:
- Rendering Engine: Converts HTML/CSS to pixels (Blink/Chrome, WebKit/Safari, Gecko/Firefox).
- JS Engine: Executes JavaScript (V8/Chrome, SpiderMonkey/Firefox, JavaScriptCore/Safari).
Types:
- Thin: Minimal local processing; server does the heavy lifting (VDI, terminal).
- Thick: Significant local processing (Gaming PC, Video Editor).
- Hybrid: Modern web apps (React/Vue) where logic is shared.

The Server (Backend)

Web Server: Handles HTTP, static files, reverse proxy (Nginx, Apache).
App Server: Runs business logic, connects to DB (Node.js, Gunicorn, Tomcat).
Forms:
- Physical: Bare metal hardware.
- Virtual (VM): Software-emulated hardware (EC2).
- Container: OS-level virtualization (Docker).
- Serverless: Event-driven functions (AWS Lambda).

1.2.c HTTP (HyperText Transfer Protocol)

Evolution

Version	Key Features
0.9	One-line protocol; GET only; no headers.
1.0	Added headers, status codes, POST method.
1.1	Persistent connections (Keep-Alive), Host header, Pipelining.
2.0	Binary, Multiplexing (one TCP conn), Header compression (HPACK).
3.0	QUIC (UDP-based), eliminates Head-of-Line (HOL) blocking.

Methods, Safety, and Idempotency

Method	Safe?	Idempotent?	Purpose
GET	Yes	Yes	Retrieve resource.
POST	No	No	Create resource / Submit data.
PUT	No	Yes	Replace resource.
PATCH	No	No	Partial update.
DELETE	No	Yes	Remove resource.
HEAD	Yes	Yes	GET without body (headers only).
OPTIONS	Yes	Yes	Check allowed methods (CORS).

Status Codes

Range	Category	Examples
1xx	Informational	101 Switching Protocols
2xx	Success	200 OK, 201 Created, 204 No Content
3xx	Redirection	301 Permanent, 302 Found, 304 Not Modified
4xx	Client Error	400 Bad Request, 401 Unauth, 403 Forbidden, 404 Not Found
5xx	Server Error	500 Internal Error, 502 Bad Gateway, 503 Service Unavail

Key Concepts

CORS: Browser security mechanism using OPTIONS preflight to allow cross-origin requests.
Cookies: HttpOnly (prevents JS access), Secure (HTTPS only), SameSite (CSRF protection).
TLS: Encryption layer for HTTPS (Handshake: Cipher negotiation + Cert validation).

1.2.d What Happens When You Visit a Website

The Request Lifecycle

URL Parsing: Browser breaks down scheme, host, port, path.
HSTS Check: Force HTTPS if domain is in HSTS list.
Cache Check: Check Service Worker, Memory, or Disk cache.
DNS Resolution: (See 1.1.e) Resolve hostname to IP.
TCP/TLS Handshake: (See 1.1.b) Establish secure connection.
HTTP Request: Browser sends request headers and body.
Server Processing: LB -> Web Server -> App Server -> Database.
HTTP Response: Server sends status, headers, and payload.

The Rendering Pipeline (Critical Path)

HTML ──> DOM Tree ──┐
                    ├──> Render Tree ──> Layout ──> Paint ──> Composite
CSS  ──> CSSOM Tree ┘

DOMContentLoaded: HTML parsed, scripts executed (mostly).
Load Event: All resources (images, styles) finished loading.

1.2.e Frontend vs Backend

Technology Stack

Layer	Technologies
Frontend	HTML5, CSS3, JavaScript (ES6+), React, Vue, Tailwind.
Backend	Node.js, Python (Django/FastAPI), Go, Java (Spring), Ruby.
Database	SQL (PostgreSQL, MySQL), NoSQL (MongoDB, Redis).
API	REST, GraphQL, WebSockets, gRPC.

Modern Rendering Landscape

SSR (Server-Side): HTML generated per request (Better SEO, slower TTFB).
SSG (Static): HTML generated at build time (Fastest, cheap hosting).
ISR (Incremental): Background re-generation of static pages (Best of both).

1.2.f Static vs Dynamic

Feature	Static	Dynamic
Content	Same for everyone	Personalized / Real-time
Database	Not required	Required
Speed	Extremely fast (CDN)	Slower (Server processing)
Cost	Low (Blob storage)	Higher (Compute + DB)
Rendering	SSG	SSR / CSR

1.2.g Web Hosting

7 Types of Hosting

Shared: Multiple sites on one server (Cheap, noisy neighbor).
VPS: Sliced physical server via Hypervisor (Dedicated resources).
Dedicated: Entire physical machine (Maximum control/cost).
Cloud: Distributed resources (AWS, GCP, Azure) — Pay-as-you-go.
Managed: Provider handles updates/security (WP Engine).
Colocation: You own hardware, they provide space/power/cooling.
Serverless: No server management; scales to zero (Vercel, Netlify, Lambda).

Master workflow — The Server Stack

Load Balancer: Receives traffic; distributes to healthy nodes.
Web Server (Nginx): Terminates TLS; serves static assets; forwards to App.
App Server (Node.js): Executes business logic; queries Database.
Database (Postgres): Persists data; returns results to App.
Cache (Redis): (Optional) Stores frequent queries to offload DB.
Response: App -> Web Server -> LB -> Client.

One-liner definitions (20+ terms)

Term	One-liner
Client	Device or software that initiates requests to a server.
Server	Computer or program that provides services/resources to clients.
Protocol	Set of rules for data exchange (e.g., HTTP, FTP).
Stateless	Each request is independent; server doesn't "remember" previous ones.
Stateful	Server maintains context/session between requests.
Idempotency	Making the same request multiple times has the same effect as once.
Safe Method	HTTP method that does not modify server state (e.g., GET).
Payload	The actual data transmitted in an HTTP request/response body.
Header	Metadata sent with HTTP requests/responses (e.g., Content-Type).
MIME Type	Label indicating the nature/format of a file (e.g., `text/html`).
User-Agent	Header identifying the client software (browser/version).
Reverse Proxy	Server that sits in front of app servers to handle security/load.
API	Interface allowing two software components to communicate.
REST	Architectural style using standard HTTP methods and URIs.
JSON	Lightweight data-interchange format used in most modern APIs.
DOM	Tree representation of HTML used by browsers to render pages.
CSSOM	Tree representation of CSS styles associated with the DOM.
TTFB	Time To First Byte — measure of server responsiveness.
FCP	First Contentful Paint — when the first bit of UI appears.
Hydration	Process of attaching JS event listeners to server-rendered HTML.
Uptime	Percentage of time a hosting service is operational (e.g., 99.9%).
Bandwidth	Amount of data that can be transferred over a period.
Domain	Human-readable address (google.com) mapped to an IP.

End of 1.2 quick revision.