2.15. What Happens When You Enter a URL?
Table of Contents
Step 1: You Type a URL
When you type a URL like:
https://www.example.com/products?category=booksyour browser first needs to understand and parse it.
A URL usually has these parts:
| Part | Example | Meaning |
|---|---|---|
| Scheme | https | Protocol to use, usually HTTP or HTTPS |
| Hostname | www.example.com | Domain name of the server |
| Port | :443 (hidden) | Network port, defaults depend on scheme |
| Path | /products | Which resource on the server |
| Query string | ?category=books | Extra parameters |
| Fragment | #section-1 | Page position, handled only by browser |
Your browser splits this into pieces so it knows:
- Which protocol to use (HTTP or HTTPS).
- Which server to contact.
- Which port to connect to.
- Which resource to request from that server.
Important: The scheme (http/https) decides:
- Which port is used by default (80 or 443).
- Whether the connection is encrypted or not.
For the rest of this chapter, assume you enter https://www.example.com/.
Step 2: Browser Checks Cache and Hosts
Before talking to other computers, the browser checks what it already knows.
Browser cache for the IP
The browser first needs the IP address of www.example.com. To avoid asking every time, it checks:
- Its own in-memory DNS cache.
- The operating system’s DNS cache.
If it finds a cached IP address, it can skip a lot of work.
Example:
- Yesterday you visited
www.example.com. - The DNS answer said: "You can cache this IP for 1 hour" (TTL).
- If 30 minutes have passed, the browser can reuse that IP.
hosts file
If the IP is not cached, the OS may check the local hosts file:
- On Linux / macOS:
/etc/hosts - On Windows:
C:\Windows\System32\drivers\etc\hosts
Example hosts entry:
127.0.0.1 localhost
203.0.113.10 www.example.com
If such a line exists, www.example.com will resolve directly to 203.0.113.10, skipping external DNS.
As a backend developer, you sometimes use hosts entries to:
- Map custom domains to local development servers.
- Test staging environments.
Step 3: DNS Lookup
If the browser and OS do not know the IP address, they ask a DNS resolver.
Who is the DNS resolver?
Usually:
- Your router,
- Your ISP’s DNS server,
- Or a public DNS server like
8.8.8.8(Google) or1.1.1.1(Cloudflare).
Your computer sends a DNS query:
- "What is the IP for
www.example.com?"
The resolver then does the heavy work. It might already know the answer (cached). If not, it asks other DNS servers in this order:
- Root DNS servers
They do not knowwww.example.com, but they know where.comis managed. - TLD (Top Level Domain) server for
.com
It says, "The nameserver forexample.comisns1.something.com." - Authoritative DNS server for
example.com
This server knows the real IP forwww.example.com, for example93.184.216.34.
The resolver returns this IP to your computer and caches it for some time, defined by TTL (time to live).
Rule: DNS translates domain names to IP addresses.
Without DNS, you would have to use IP addresses like 93.184.216.34 instead of www.example.com.
Step 4: TCP Connection
Now the browser knows the IP, for example 93.184.216.34, and the scheme is https.
It must open a TCP connection:
- Destination IP:
93.184.216.34 - Destination port:
443(default for HTTPS) - Source IP and source port: chosen by your OS.
TCP handshake
Before sending HTTP data, TCP does a three-way handshake:
- Client sends
SYNto server. - Server responds
SYN-ACK. - Client responds
ACK.
After this, a reliable connection is established.
This handshake:
- Ensures both sides are ready.
- Sets up sequence numbers for ordered and reliable delivery.
As a backend developer, you usually do not implement TCP directly, but it is important to know that HTTP uses TCP on ports like 80 and 443.
Step 5: TLS Handshake (for HTTPS)
Because the URL starts with https, the browser wants an encrypted connection.
On top of TCP, it performs a TLS handshake.
In simple terms:
- Browser says "Hello", with:
- Supported TLS versions.
- Supported encryption algorithms (ciphers).
- A random number.
- Server responds with:
- Selected TLS version and cipher.
- Its TLS certificate, which contains its public key and its domain.
- Another random number.
- Browser verifies the certificate:
- Is it signed by a trusted Certificate Authority (CA)?
- Is it valid (not expired)?
- Does the domain in the certificate match
www.example.com? - If valid, the browser and server agree on a shared secret (session key), using the public key and some cryptography.
- From now on, data is encrypted before sending over TCP.
If certificate validation fails, the browser shows a warning like:
Your connection is not private.
Important: HTTPS = HTTP over TLS over TCP.
HTTP is the same protocol, but its content is encrypted and protected from eavesdropping and tampering.
Step 6: Browser Sends an HTTP Request
Now the browser has:
- A TCP connection.
- A secure TLS channel (for HTTPS).
- The URL and its parts.
It can send a HTTP request.
Example request for https://www.example.com/:
GET / HTTP/1.1
Host: www.example.com
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64)
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate, br
Connection: keep-alive
Upgrade-Insecure-Requests: 1
Cookie: session_id=abc123Key parts:
- Request line:
GET / HTTP/1.1 - Method:
GET - Path:
/ - Protocol version:
HTTP/1.1 - Headers:
Host: Which domain the request is for. Required in HTTP/1.1.User-Agent: Information about browser and OS.Accept: What types of data the client can handle.Cookie: Previously set cookies for this domain.Connection: keep-alive: Suggests to keep TCP open for more requests.
For a GET request to a typical web page, there is no request body.
Step 7: Server Receives the Request
Somewhere on the internet, at IP 93.184.216.34 and port 443, there is a server.
This server usually has:
- A reverse proxy or web server (like Nginx, Apache, or a cloud load balancer).
- An application server (like Uvicorn, Gunicorn, Node.js server, etc).
- Your backend application code.
A simplified flow:
- The TCP and TLS parts are handled by the operating system and the web server / proxy.
- The web server reads the HTTP request.
- It decides which application should handle this request.
- It passes the request to the application server and then to your backend application.
For example, Nginx configuration might say:
location / {
proxy_pass http://127.0.0.1:8000;
}
So Nginx forwards the HTTP request to your backend running on port 8000.
Step 8: Backend Application Processes the Request
Your backend application now has access to:
- HTTP method (
GET) - Path (
/) - Query parameters (none in this example)
- Headers (like
Cookie,User-Agent) - Maybe a request body (for POST, PUT, etc)
The backend runs through several steps.
8.1 Routing
The application checks which route matches the request.
Example in FastAPI:
from fastapi import FastAPI
app = FastAPI()
@app.get("/")
def read_root():
return {"message": "Hello, world!"}
@app.get("/products")
def list_products():
return [{"id": 1, "name": "Book"}]
When it sees GET /, it calls read_root.
If you had requested GET /products, it would call list_products.
8.2 Middleware and authentication
Before hitting your route handler, the request might go through:
- Logging middleware.
- Authentication middleware that checks a session or token.
- CORS middlewares.
- Rate limiting.
Example logic:
- Read
Cookie: session_id=abc123. - Look up user session in Redis or database.
- Attach user info to the request, such as
user_id=42.
8.3 Business logic
Your route handler performs the business logic:
- Read from a database.
- Call other services or APIs.
- Apply application rules.
Example (pseudo code):
def list_products():
# Query database
products = db.query("SELECT id, name, price FROM products LIMIT 20")
# Return them as a JSON-compatible object
return {"items": products}8.4 Creating the HTTP response
The backend then builds a response:
- Status code, like
200 OK. - Headers, like
Content-Type,Set-Cookie. - Body, which can be HTML, JSON, images, etc.
Example HTTP response for an HTML page:
HTTP/1.1 200 OK
Content-Type: text/html; charset=utf-8
Content-Length: 1256
Set-Cookie: session_id=abc123; HttpOnly; Secure; Path=/
Cache-Control: max-age=600
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
<h1>Hello from example.com</h1>
</body>
</html>The web server sends this back over the TLS and TCP connection to your browser.
Step 9: Browser Receives the Response
The browser now has the HTTP response. It does several things.
9.1 Check the status code
Based on the status code, the browser decides what to do:
200 OK
Use the body as the main content.301or302(redirect)
Look at headerLocation, and automatically make a new request to that URL.404 Not Found
Show "Not found" page.500 Internal Server Error
Show "Server error" page.
9.2 Parse headers
The browser uses headers to adjust behavior:
Content-Type: text/html: Treat body as HTML.Content-Type: application/json: It might show JSON or give it to JavaScript.Set-Cookie: Store cookies for future requests.Cache-Control: Decide how long to cache this response.
Example Set-Cookie:
Set-Cookie: session_id=abc123; HttpOnly; Secure; Path=/; Max-Age=3600
The browser stores session_id=abc123 and will send it with every future request to this domain, unless it expires or is deleted.
Step 10: Browser Renders the Page
If the response is HTML, the browser starts rendering.
10.1 Parse HTML
The browser:
- Parses HTML into a DOM tree (Document Object Model).
- Reads
<head>and<body>.
Example HTML:
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<link rel="stylesheet" href="/styles.css">
<script src="/app.js"></script>
</head>
<body>
<h1>Hello</h1>
<img src="/logo.png" alt="Logo">
</body>
</html>From this, the browser finds subresources:
- CSS file
/styles.css. - JavaScript file
/app.js. - Image
/logo.png.
10.2 Make additional HTTP requests
For each external resource, the browser makes more HTTP requests to the same server (unless full URLs point elsewhere).
Example requests:
GET /styles.css HTTP/1.1
Host: www.example.com
...
GET /app.js HTTP/1.1
Host: www.example.com
...
GET /logo.png HTTP/1.1
Host: www.example.com
...These go through exactly the same network steps:
- Possibly reuse the same TCP and TLS connections with
keep-alive. - Go through routing on the server.
- Server returns CSS, JS, images, etc.
Your backend may serve these:
- Directly from the application.
- Via a web server like Nginx as static files.
- From a CDN (Content Delivery Network).
10.3 Apply CSS, run JavaScript
The browser:
- Applies the CSS to style the page.
- Runs JavaScript, which can:
- Modify the DOM (change the page).
- Make more network requests (AJAX / fetch).
- Interact with the user.
As a backend developer, you mainly care about:
- The network requests the JavaScript sends.
- The APIs it calls.
- How your backend responds.
Step 11: Further Requests and Interactions
Once the initial page is loaded, the user might:
- Click on a link.
- Submit a form.
- Trigger JavaScript actions.
Each of these can cause new HTTP requests.
Examples:
- User clicks link
<a href="/products">Products</a>
Browser requests:
GET /products HTTP/1.1
Host: www.example.com
Cookie: session_id=abc123- User submits a login form:
Form:
<form method="POST" action="/login">
<input name="username">
<input name="password" type="password">
<button type="submit">Login</button>
</form>Browser sends:
POST /login HTTP/1.1
Host: www.example.com
Content-Type: application/x-www-form-urlencoded
Content-Length: ...
username=alice&password=secret123- JavaScript fetch:
fetch("/api/products")
.then(response => response.json())
.then(data => console.log(data));Browser sends:
GET /api/products HTTP/1.1
Host: www.example.com
Accept: application/jsonEach request repeats the same high-level sequence:
- Browser prepares HTTP request.
- Uses existing connection or opens a new one.
- Optional DNS lookup if domain is different.
- Sends request.
- Backend processes it and returns a response.
- Browser updates the page or internal state.
Step 12: Connection Reuse and Closing
TCP connections are not always closed immediately.
- With
Connection: keep-alive, multiple HTTP requests and responses can use the same TCP connection. - This avoids repeating the TCP and TLS handshakes for every small resource.
After some time of inactivity, either the client or the server closes the connection with a TCP FIN message.
New requests later may open new connections.
Putting It All Together
Let us summarize the main steps when you enter a URL like https://www.example.com/:
- Parse URL into scheme, host, port, path, query.
- Check cache and hosts for an existing IP.
- Do DNS lookup if needed, to find the IP of
www.example.com. - Open TCP connection to IP on port 443.
- Perform TLS handshake to secure the connection (HTTPS).
- Send HTTP request, for example
GET / HTTP/1.1. - Server receives and forwards request to backend application.
- Backend routes the request, runs middleware, business logic, database queries.
- Backend builds HTTP response with status, headers, and body.
- Browser receives response, stores cookies, applies caching rules.
- Browser parses HTML, makes more requests for CSS, JS, images.
- Browser renders page and runs JavaScript.
- Further user actions cause more HTTP requests and responses.
As a backend developer, you mostly work on steps 7 to 9, but understanding the whole journey helps you:
- Debug issues like "site does not load".
- Interpret browser dev tools.
- Configure things like HTTPS, domains, and caching correctly.
Views: 12
KAHIBARO