Describe the client-server architecture of the web, including the roles of the browser, web server, application server and database

What this dot point is asking

NESA wants you to describe how a modern web application is split across several tiers - browser, web server, application server, database - and explain what each does. The request-response cycle is the canonical worked example.

The answer

A modern web application is split across four tiers, with the browser on the user's device and the other three on the server side. The diagram shows the path of one request and response.

The four tiers

Most web applications follow a three- or four-tier architecture:

• Client (browser): runs HTML, CSS, JavaScript. Displays the UI. Sends HTTP requests in response to user actions.
• Web server: handles HTTPS termination, serves static files, routes dynamic requests to the application server. Examples: Nginx, Apache, Caddy.
• Application server: runs the business logic. Reads input, applies authorisation, queries the database, formats output. Examples: a Python Flask app, a Node.js Express server, a Java Spring service.
• Database: persistent storage. Relational (PostgreSQL, MySQL, SQLite) or NoSQL (MongoDB, DynamoDB). Only the application server connects to it directly.

Some setups split or merge these tiers (single-page apps with a separate API tier, serverless functions that combine web and application server, monoliths that bundle web and application server).

The request-response cycle

1. The user clicks "Add to cart".
2. The browser issues a POST request: POST /api/cart HTTP/1.1 Host: shop.example.com Content-Type: application/json Body: {"product_id": 42}.
3. The web server receives the request, terminates HTTPS, and forwards it to the application server.
4. The application server authenticates the session token, validates the product ID, and runs the handler.
5. The handler calls the database: INSERT INTO cart_items (user_id, product_id) VALUES (?, ?).
6. The database executes the query and returns success.
7. The handler returns a 201 response with the new cart contents as JSON.
8. The web server forwards the response to the browser.
9. The browser updates the UI based on the JSON response.

Most pages involve multiple requests: the initial HTML, several CSS and JavaScript files, images, fonts, and any AJAX calls JavaScript makes.

A worked code example

A minimal three-tier slice in Python with Flask:

from flask import Flask, request, jsonify
import sqlite3

app = Flask(__name__)

def db():
    return sqlite3.connect("shop.db")

@app.post("/api/cart")
def add_to_cart():
    user_id = authenticate(request.headers.get("Authorization"))
    if not user_id:
        return jsonify(error="unauthenticated"), 401
    data = request.get_json()
    product_id = int(data["product_id"])
    with db() as conn:
        conn.execute(
            "INSERT INTO cart_items (user_id, product_id) VALUES (?, ?)",
            (user_id, product_id),
        )
    return jsonify(status="ok"), 201

In front of this app, Nginx (web server) handles HTTPS and serves static files. Behind it, SQLite (database) stores cart data.

Why split into tiers

• Separation of concerns: each tier has a focused job and uses tools optimised for that job.
• Scalability: each tier can scale independently. If the database is the bottleneck, scale the database. If application logic is the bottleneck, run more application server instances.
• Security: only the application server reaches the database. The database is not exposed to the internet.
• Maintainability: changes to the UI (browser tier) do not force changes to the database schema.