What Is the Client and Server?

The Two Sides of Every Web App

Every time you open a website, use a phone app, or stream a video, two computers are talking to each other. One is right in front of you — the client. The other is somewhere far away, hidden in a building full of computers — the server.

The client is the app or browser you use. It asks for things. When you type a web address into your browser, your browser (the client) sends a message: "Hey, I want to see this page."

The server is a computer that waits for those messages. When it receives one, it finds the information being asked for — a page, a photo, your data — and sends it back. The server's whole job is to listen for requests and answer them.

Think of it like a restaurant. The client is the customer sitting at a table, placing an order. The server is the kitchen, preparing the food and sending it back out. The customer never goes into the kitchen — they just make requests and receive meals.

Why Understanding This Helps You Build Better Apps

Most bugs beginners run into aren't in their code — they're in the gap between the client and server. A button doesn't work. Data doesn't show up. An error appears. Understanding that the client and server are two separate things, talking to each other over the internet, helps you figure out where the problem is.

Is the client sending the right request? Is the server receiving it? Is the server sending back the right response? Is the client reading it correctly? When you know who does what, debugging becomes way less confusing.

This also matters when you're building anything that uses data. Weather apps, social media feeds, online stores — all of them work because a client asked a server for information and the server answered.

The Request and Response Cycle

Here's the exact step-by-step process that happens every time you interact with a web app:

Each step happens in milliseconds. The language they use to talk is called HTTP — Hypertext Transfer Protocol. When you visit a URL like https://example.com/page, your browser sends an HTTP request. The server reads it, processes it, and sends back an HTTP response with your page data.

Making an API Request with JavaScript

Here's a real example of a client (your browser) asking a server for data. This JavaScript code asks a public API for a random joke. The client sends a request, waits, and then the server sends back the joke.

// The client (your browser) sends a GET request to a server
fetch('https://official-joke-api.appspot.com/random_joke')
  .then(response => response.json())
  .then(data => {
    // The server sent back the joke — now the client displays it
    console.log(`${data.setup} — ${data.punchline}`);
  })
  .catch(error => {
    // Something went wrong in the conversation between client and server
    console.log('Error:', error);
  });

In this example, fetch() is the client making the request. The URL is the address of the server. When the server responds, the .then() blocks run — first converting the raw response into readable data, then displaying the joke. The .catch() handles the case where the server couldn't be reached or returned an error.

Knowledge Check

Test what you learned with this quick quiz.