7. Components of Web Architecture

CSS Optional — Paper-II, Section-B · P-II.VI.7 · What physically and logically makes up a web system, and how a request travels through it.

1. Overview

graph LR
    B["Client: browser / mobile app"] --> DNS["DNS"]
    B --> CDN["CDN edge cache"]
    CDN --> FW["Firewall / WAF"]
    FW --> LB["Load balancer"]
    LB --> WS1["Web server 1"]
    LB --> WS2["Web server 2"]
    WS1 --> AS["Application server"]
    WS2 --> AS
    AS --> C["Cache: Redis"]
    AS --> DB["Database server"]
    AS --> EXT["External services / legacy systems"]

2. The Components

Logically these group into presentation (client, web server), business logic (application server) and data (database, cache, storage) layers.

3. What Happens When You Type a URL (request lifecycle)

1. URL parsing: https://www.example.com/products?id=5 → protocol, host, path, query.
2. DNS lookup: browser/OS cache → resolver → root → TLD (.com) → authoritative server returns the IP.
3. TCP connection (3-way handshake: SYN, SYN-ACK, ACK) to port 443.
4. TLS handshake: certificate verified, session keys agreed → encrypted channel.
5. HTTP request sent: GET /products?id=5 with headers (Host, User-Agent, Cookie).
6. CDN / load balancer route the request; web server serves static files or passes to the application server.
7. App server runs logic, queries cache/database, builds HTML or JSON.
8. HTTP response: status code (200), headers (Content-Type, Cache-Control, Set-Cookie), body.
9. Browser rendering: parse HTML → DOM; parse CSS → CSSOM; build render tree → layout → paint; run JavaScript; fetch images/CSS/JS.

4. HTTP Essentials

• Stateless: each request is independent; state is kept with cookies, sessions, tokens.
• Methods: GET (read), POST (create/submit), PUT (replace), PATCH (partial update), DELETE, HEAD, OPTIONS.
• Status codes: 1xx informational; 2xx success (200 OK, 201 Created); 3xx redirect (301 Moved Permanently, 302 Found, 304 Not Modified); 4xx client error (400 Bad Request, 401 Unauthorized, 403 Forbidden, 404 Not Found); 5xx server error (500 Internal Server Error, 502 Bad Gateway, 503 Service Unavailable).
• Versions: HTTP/1.1 (persistent connections), HTTP/2 (multiplexing, header compression), HTTP/3 (over QUIC/UDP).

---

🎯 CSS Exam Angle

Draw the component diagram, then a table of component → role → example. The "what happens when you type a URL" sequence is an excellent way to show how components cooperate.

⚠️ MCQ Traps

• A web server handles HTTP; an application server runs business logic — Apache alone is not an application server.
• A reverse proxy sits in front of servers; a forward proxy sits in front of clients.
• 401 = not authenticated; 403 = authenticated but not allowed.
• HTTP is stateless; sessions/cookies add state.
• DNS maps names to IPs; it does not host the website.

---

✅ Self-Check (with Answers)

Q1. Differentiate a web server from an application server.

Ans: A web server (Apache, Nginx) handles HTTP connections and serves static content, forwarding dynamic requests; an application server (Tomcat, PHP-FPM, Node.js) executes business logic, accesses databases and generates dynamic responses.

Q2. What is the purpose of a load balancer? Name two algorithms.

Ans: It distributes incoming requests across several servers for scalability and availability, removing failed servers via health checks. Algorithms: round robin, least connections (also IP hash, weighted).

Q3. How does a CDN improve performance?

Ans: It caches static content (images, CSS, JS, video) on edge servers near users, reducing latency and origin-server load, and absorbing traffic spikes and some DDoS attacks.

Q4. What status code would a server return for (a) a missing page, (b) a crashed script, (c) a page permanently moved?

Ans: (a) 404 Not Found, (b) 500 Internal Server Error, (c) 301 Moved Permanently.

Q5. If HTTP is stateless, how does a shopping cart remember items?

Ans: The server creates a session and sends a session ID in a cookie; the browser returns the cookie with each request, letting the server retrieve the cart from session storage (or the cart is stored client-side in localStorage/tokens).

📜 Past-Paper Questions & MCQs (CSS 2016–2026)

2016 · Paper-II · Q8(c) · 6 marks

Q. What are the components of a generic web application architecture?

Ans.

• Client (browser): displays pages and runs client-side code (HTML, CSS, JavaScript).
• Network and protocols: the Internet and HTTP/HTTPS, DNS and TCP/IP carry requests and responses.
• Web server: receives HTTP requests and serves static content (Apache, Nginx, IIS).
• Application (business-logic) server: runs server-side code (PHP, Java, ASP.NET, Node.js) that processes requests and makes dynamic pages.
• Database server: stores persistent data (MySQL, PostgreSQL, SQL Server).
• Supporting components: proxies, caches and CDNs, load balancers, firewalls, and middleware or APIs to external services.
• Content: static and dynamic content and the media files.
• Flow: browser → (DNS) → web server → application → database → response back to the browser.