How the web works
Client, server, DNS, URL and origin — what happens when you open a page.
Updated
What the web actually is
The web is a conversation between two programs:
- The client — usually the browser. It asks for something.
- The server — a computer that listens for requests and sends back responses (HTML, JSON, images).
The conversation always has the same shape: request → response. Every page you open means dozens of these pairs (HTML, CSS, JS, fonts, images).
What happens when you type an address
- The URL is split into parts (protocol, domain, path).
- DNS translates the domain (
learn-js.vercel.app) into an IP address (76.76.21.21) — like a phone book. - The browser opens a connection to the server (TCP + TLS for HTTPS).
- It sends an HTTP request:
GET /js/functions. - The server responds with HTML.
- The browser reads the HTML, discovers CSS/JS/images and requests those too.
- It builds the page and paints it on screen (lesson How the browser renders).
Anatomy of a URL
https://learn-js.vercel.app:443/js/functions?tab=exercises#closurehttpsprotocollearn-js.vercel.apphost:443port/js/functionspath?tab=exercisesquery#closurehash
| Part | Role |
|---|---|
| protocol | how we talk: https (encrypted) or http |
| host | which server |
| port | the server's door; 443 by default for https, 80 for http |
| path | which resource |
| query | parameters (?page=2&sort=new) — sent to the server |
| hash | a position on the page (#closure) — not sent to the server |
Origin
Origin = protocol + host + port. https://a.com and https://a.com/blog share the same origin; https://api.a.com has a different one. The browser isolates origins from each other — the foundation of web security (see Security).
Frontend, backend, full-stack
| Runs | Examples | |
|---|---|---|
| Frontend | in the browser | HTML, CSS, JS, React |
| Backend | on the server | databases, authentication, APIs |
| Full-stack framework | in both | Next.js — Server Components run on the server, Client Components in the browser |
Static vs dynamic
- Static — the HTML file is ready in advance; the server just sends it. Very fast, can live on a CDN.
- Dynamic — the HTML is generated on every request (depends on the user or on fresh data).
Next.js combines them: the parts that can be static are pre-generated, the rest is produced on request.
Summary
- Web = the client asks, the server responds.
- DNS translates a domain into an IP.
- URL = protocol + host + path + query + hash; origin = protocol + host + port.
- One page = dozens of requests.