Stop 01 · Internet & Web BasicsTopics · 6/14

Client vs Server

In short

Some code runs on the user's phone, some runs on a computer far away. Knowing which is which decides what you can trust, what you can hide and how fast things feel.

The client (browser/app) requests and displays data; the server stores data, runs business logic and responds to requests — understanding this split is core to web architecture. The boundary is not always fixed: modern applications can render on the server, hydrate in the browser, and move some work between environments depending on performance, security, and product requirements.

The jaadu waiter serves a customer while the chef guards the kitchen.

Think of it like this

Restaurant table vs kitchen

The table (client) is where you see the menu and eat. The kitchen (server) keeps the recipes, the stock and the cash. You'd never let customers walk into the kitchen and change the prices.

Watch it happen

Buying a course, safely

Client

Server

Database

buy course 12

1/5The client sends only what the user chose. No price.

The big ideas

What you need to know

The client shows things

Browsers and apps display the UI, handle clicks and send requests.

The server owns the data

Servers store data in databases, run business rules and decide who can see what.

Never trust the client

Anyone can edit JavaScript in their browser, so checks like prices or permissions must happen on the server too.

The line can move

Frameworks like Next.js can build a page on the server and then make it interactive in the browser.

See it in code

Walk through the code

1// Bad: the client decides the price. Anyone can edit it.2fetch("/api/checkout", {3  method: "POST",4  headers: { "Content-Type": "application/json" },5  body: JSON.stringify({ courseId: 12, price: 1 }),6});7 8// Good: send only what was chosen. The server looks up the price.9fetch("/api/checkout", {10  method: "POST",11  headers: { "Content-Type": "application/json" },12  body: JSON.stringify({ courseId: 12 }),13});

1/2Bad: the client sends the price. Anyone can change it to ₹1 in DevTools.

In the second version the server reads the real price from its own database, so editing the request in DevTools can't get anyone a ₹1 course.

Save yourself the pain

Common mistakes

Oops

Hiding an API key inside frontend JavaScript.

Do this instead

Anything shipped to the browser is public. Keep secrets on the server and call it from the client.

Oops

Only validating forms in the browser.

Do this instead

Validate in the browser for a nice experience, and again on the server for safety.

Your mission

Split an app in two

~10 min

Quick check

Where should you check that a user is allowed to delete a post?

Go deeper

1Trace one feature (e.g. login) and identify what runs client-side vs server-side. Validate your understanding by applying it in a small practical example.
2Learn the difference between client-side and server-side rendering. Focus on understanding the underlying reason it works, not only memorizing the definition.
3Read about the request/response contract between frontend and backend teams.