Client Server Architecture

Client-Server architecture is the fundamental backbone of the modern internet. Whether you are browsing a website, playing a multiplayer game, or sending a message on your phone, you are interacting with a client-server model.

Understanding this architecture is step zero for mastering system design.

What is a Client?

The Client is the piece of hardware or software that requests services, data, or resources.

It is typically the "front-end" that the user interacts with.
Examples: A web browser (Chrome, Safari), a mobile app (iOS/Android UI), or even a desktop application or smart TV.
The client's primary job is to take user input, format it into a request, send it over the network, and display the response back to the user cleanly.

What is a Server?

The Server is the centralized machine or software application that fulfills the client's requests.

It is the "back-end" where the heavy lifting happens.
Job of the server: Listen for incoming network requests, process the business logic (e.g., validate passwords, fetch data from a database, calculate routes), and send the formatted response back to the client.
Servers are typically high-performance machines residing in data centers (like AWS, Google Cloud, or Azure).

The Request-Response Cycle (Data Flow)

Clients and servers communicate over a network (like the internet) using standard protocols, the most common being HTTP/HTTPS.

Here is a flow diagram representing a standard HTTP interaction:

    [ CLIENT ]                                    [ SERVER ]
   (Web Browser)                                 (Node.js API)
         |                                             |
         |  ----- 1. HTTP GET /api/user/123 ------->   |
         |                                             | (Parses Request)
         |                                             | (Queries Database)
         |                                             | (Formats JSON)
         |                                             |
         |  <---- 2. HTTP 200 OK + JSON Data -------   |
         |                                             |
   (Renders UI)                                        v

Code Example: A Basic Server

To demystify what a "Server" actually is, look at this simple Express.js (Node.js) server code. It listens for the exact request shown in the diagram above:

const express = require('express');
const app = express();
const PORT = 8080;

// Fake Database
const usersDB = {
    '123': { name: 'Alice', role: 'Admin' },
    '456': { name: 'Bob', role: 'User' }
};

// 1. The Server listens for a GET request on a specific route
app.get('/api/user/:id', (req, res) => {
    const userId = req.params.id;
    
    // 2. Business Logic & Database Query
    const user = usersDB[userId];
    
    if (user) {
        // 3. Send Success Response back to Client
        res.status(200).json(user);
    } else {
        // 4. Send Error Response
        res.status(404).json({ error: 'User not found' });
    }
});

// Start the server listening on the network interface
app.listen(PORT, () => {
    console.log(`Server listening on port ${PORT}`);
});

Tiered Architectures

As systems grow, the "server" part is broken down into multiple tiers to improve security, scalability, and maintainability:

1-Tier Architecture

The client, server, and database all reside on the same machine. (Usually only for local development or basic prototypes).

2-Tier Architecture

The client talks directly to a database server. (Rarely used in modern web apps due to security risks and poor scalability).

3-Tier Architecture

The industry standard.

  [ Presentation Tier ]  <---->  [ Application Tier ]  <---->  [ Data Tier ]
   (React / iOS App)              (Java / Node.js)              (PostgreSQL)

Presentation Tier: The Client (Browser/App).
Application Tier: The Backend Server containing the business logic.
Data Tier: The Database storing persistent state.

By separating the application logic from the database, the system becomes significantly more secure and allows you to scale the web servers independently of the database servers.

Watch the accompanying video to visualize these concepts and see how a request flows through a modern architecture!

Client Server Architecture | System Design Essentials