What is a client?

Think of the client like a customer walking into a restaurant. You have a specific request: "I'd like to see the menu" or "I'd like the pasta." You don't need to know how the kitchen works. You just need to communicate what you want.

The client is any application that requests data. Most of the time, that's your web browser, Chrome, Firefox, Safari. But clients come in many forms:

• Web browsers on your laptop or phone
• Mobile apps like Twitter or Uber
• Desktop applications like Slack or Spotify
• Other servers making APIWhat is api?A set of rules that lets one program talk to another, usually over the internet, by sending requests and getting responses. Ask AI for more calls behind the scenes

When you type google.com into your browser, you're essentially saying: "Give me Google's homepage." Your browser formats this request properly and sends it out into the internet.

What clients actually do

Beyond just asking for pages, clients handle a surprising amount of work:

What is a server?

The server is a computer, often a powerful one in a data center, that stores data and responds to requests. But "server" describes a role, not a specific type of machine.

Servers do three things:

1. Store data: HTML files, images, videos, databases, user accounts
2. Listen for requests: They're always on, waiting for clients to connect
3. Respond with data: They find what was requested and send it back

Like a restaurant kitchen, the server waits for orders, prepares what's needed, and sends it out. Unlike a kitchen, a single server can handle thousands of requests simultaneously.

The server is just software

Here's something that surprises many beginners: a server isn't special hardware. It's software running on a computer. Your laptop could be a server right now.

# Start a simple server on your computer
npx serve
# Your laptop is now a web server on port 3000

What makes "server computers" in data centers different is their reliability:

But the software running on them? It's the same Node.js, Apache, or Nginx you can run locally.

How they talk to each other

The flow is simple once you visualize it:

Client (Browser)  ───[Request]───>  Server
                                    (processes)
Client (Browser)  <───[Response]──  Server

Step by step:

1. You type example.com in your browser
2. Your browser sends a request: "Give me the homepage"
3. The server receives it, finds the right file or generates a response
4. The server sends the data back over the internet
5. Your browser receives it and displays the page

This entire exchange usually happens in milliseconds, even if the server is on the other side of the world.

What travels between them?

Requests and responses aren't just the webpage content. They include:

Headers: Metadata about the request or response. Things like "This is JSONWhat is json?A text format for exchanging data between systems. It uses key-value pairs and arrays, and every programming language can read and write it. Ask AI for more data" or "I'm accepting French language content."

Status codes: Numbers that indicate success or failure (200 for OK, 404 for not found, 500 for server error).

Body: The actual content, HTML, images, JSON data, etc.

Client-side vs server-side code

This distinction is critical, and one of the most common sources of bugs, especially in AI-generated code.

// CLIENT-SIDE - runs in the browser
document.getElementById('btn').addEventListener('click', () => {
  fetch('/api/users'); // asks the server for data
});

// SERVER-SIDE - runs on the server
app.get('/api/users', (req, res) => {
  const users = db.query('SELECT * FROM users'); // accesses the database
  res.json(users);
});

Real-world analogy: the restaurant

The restaurant model makes this concrete:

You don't need to know how to cook. You just need to communicate clearly. The waiter (HTTPWhat is http?The protocol browsers and servers use to exchange web pages, API data, and other resources, defining how requests and responses are formatted. Ask AI for more) doesn't prepare the food, they just carry the message. The kitchen (server) doesn't know who you are, they just fulfill the order.

This separation of concernsWhat is separation of concerns?Organizing code so each module or layer handles one specific responsibility, making it easier to change one part without breaking others. Ask AI for more is why the web scales so well. Your phone doesn't need to store every website in the world. It just needs to ask for what it needs, when it needs it.

Quick reference