From browsing to server: The journey of your data
A Beginner's Guide to How Your Data Travels
Table of contents
Every day, you open your browser to navigate your favorite websites—whether it’s social media, news, or shopping. You do this by typing a URL or clicking a link. It feels so simple, right?
But have you ever wondered what happens behind the scenes? 🤔
How does your favorite Twitter profile load after you hit enter on x.com/Ravidootcom? 🧐
How do all those images and videos magically appear in your browser? 🖼️🎥
If these questions spark your curiosity, you’re in for an exciting ride! 🚀
In this blog, we’ll look at what happens when you type a URL into your browser and press enter. Along the way, I’ll break down technical terms like HTTP, TCP/IP, and DNS into simple concepts. Ready? Let’s dive in!
1. The Journey Begins: Request Initiation
The journey begins when you type a URL (like x.com) into your browser.
But here’s a surprising fact: browsers don’t understand domain names like x.com directly. Instead, they need to translate the domain into something called an IP address (e.g., 104.244.42.129) to locate the server hosting the website.
But wait—this raises a lot of questions:
Why do we need this IP translation stuff? 🤷
Why can’t we directly access websites using names like
x.com?
Let’s assume you want to visit my house 🏠, which I call "Bhardwaj Villa." Could you find it with just the name? Probably not! To locate it precisely, you’d need my full address 📫 including the country, state, and city.
Similarly, on the internet, every machine (server, client, etc.) has a unique identifier called an IP address (e.g., 192.168.1.1). This address ensures your request reaches the right destination.
But Memorizing long, complex IP addresses for every website would be exhausting! It’s like remembering every phone number without a contact list—possible, but incredibly inconvenient. 😵💫
Thankfully, the internet uses Domain Names as a friendly shortcut. A domain name like x.com serves as a human-readable alias for an IP address. It’s like saving someone’s name in your phone contacts instead of memorizing their number. 📱
For example:
google.com → 142.250.190.78
These easy-to-remember names make the internet accessible, efficient, and stress-free. ✨
So how does your browser figure out the IP address for x.com?
This is where the Domain Name System (DNS) comes in—a global system that works like the Internet's Phonebook of IP addresses.
The browser queries a DNS server to find the corresponding IP address for the domain name.
The DNS server responds with the IP address, allowing the browser to connect to the website's server.
DNS resolution is the process of converting a human-readable domain name into a machine-readable IP address.
It’s like looking up a phone number in a directory to call someone! 📖📞
Without DNS (Domain Name System), the web as we know it would be far less user-friendly. Let’s dive into what DNS Resolution is, why it’s essential, and how it works!
2. The Power of DNS Resolution
Let’s break it down step by step:
1. The Browser Query
When you type a URL into your browser and press enter, the browser checks its cache (local memory) to see if it already knows the IP address for the domain.
If it’s cached, the browser retrieves the IP address instantly. [ Do not need DNS Lookup/ extra work ]
If not, it sends a query to a DNS resolver to find the IP address.
2. The DNS Resolver
The DNS resolver (usually operated by your Internet Service Provider) acts as a middleman. It starts the search for the IP address by querying other DNS servers in a specific order:
3. The Hierarchy of DNS Servers
Root Servers
These are the first step in the DNS hierarchy. There are 13 sets of Root servers globally, and they direct the query to the correct Top-Level Domain (TLD) server based on the domain name.Example: For x.com, the root server directs the query to the .com TLD server.
TLD Servers
These servers manage domain extensions like .com, .org, and .in. The TLD server directs the query to the Authoritative Name Server (ANS) for the domain.Authoritative Name Servers 🏢
These servers hold the specific IP address for the requested domain. They respond to the DNS resolver with the IP address of the website’s server.Returning the IP Address
Once the Authoritative Name Server provides the IP address, the resolver sends it back to your browser. The browser then uses this IP address to establish a connection with the website’s server via protocols like TCP/IP.
3. Establishing a Connection with TCP/IP [Transmission Control Protocol/Internet Protocol ]
How does the TCP/IP protocol establish a connection between the client and the server?
Once the browser has the correct IP address, it needs to establish a connection with the web server that hosts the requested content. This connection is typically made through a protocol called TCP/IP. Think of TCP like a delivery service that ensures your package arrives safely and in order, while the OSI model is like the organizational chart that explains how various parts of the internet work together..
TCP Handshake: Before data is exchanged, a three-step process called the TCP handshake occurs. The client (your browser) and server agree on how they will communicate, establish a secure connection, and begin the transfer of data.
4. Request, Processing, and Response: Server-Client Architecture
In the digital world, the interaction between a client (browser) and a server forms the backbone of web communication. Here’s what this process looks like:
1. HTTP/HTTPS Request: The Conversation Begins
When you enter a URL or click a link, your browser sends a request to the server.
HTTP (HyperText Transfer Protocol): Standard communication protocol for web traffic.
HTTPS (Secure version of HTTP): A secure version of HTTP, using encryption to protect data.
If the site uses HTTPS, the process begins with a TLS/SSL handshake to secure the connection:
Requesting the Certificate: The browser asks the server for its SSL certificate.
Proving Identity: The server provides its certificate, verified by a trusted Certificate Authority.
Exchanging Keys: Cryptographic keys are exchanged, establishing an encrypted session. in-depth
2. Server Processing: Handling the Request
Once the connection is secure, the server processes the client’s request. This may involve:
Fetching Static Resources: HTML, CSS, JavaScript files, or images stored on the server.
Querying Databases: Retrieving dynamic data, like user profiles or product details.
Executing Scripts: Running server-side code or applications to generate responses.
The server prepares the response with the requested content or an error message if something goes wrong.
3. Response Transmission: Delivering the Results
The server sends the response back to the browser, which typically includes:
Status Code: Indicates the result of the request (e.g.,
200 OK,404 Not Found).Headers: Metadata about the response, such as content type or caching instructions.
Body: The actual content, such as HTML, JSON, or an error message
5. Rendering in the Browser
The Browser Engine uses C++/Rust transforms raw data into a webpage by parsing:
HTML → DOM: Builds the structure.
CSS → CSSOM: Applies styles.
Rendering Engines layer and paint everything, ensuring smooth visuals and animations.
Curious about the magic behind it? Watch "How does a browser work?" by Hitesh Choudhary for an in-depth explanation!
Conclusion
The journey from typing a URL into your browser to seeing a complete website is an amazing process with many steps and technologies like DNS, TCP, and HTTP. Each step is important to make your browsing smooth and safe. Learning about these steps helps you understand how the internet works. If you found this article helpful, share it with your friends to spread the knowledge!