From URL to React: What Happens When You Press Enter?

Ever typed a URL like https://example.com into your browser and wondered what happens next? As a React developer, you might be focus on components, hooks, state management and client side routing, but behind the scenes, there's an incredible series of events that transform URL into a fully interactive React app.

In this blog, we'll walk through what happens step by step when a user types a URL and press Enter and how React fits into that process.

🌐 1. URL Parsing
First browser checks URL if it is valid or not, if not then it treat it as a search query and if valid it breaks it into components like-
https://example.com:443/about?ref=blog#section

• Protocol: https or http- defines how data is transferred
• Hostname: example.com- the domain name
• Port: 443 for HTTPS(default), 80 for HTTP
• Path: /about- specific resource or route
• Query: ?ref=blog- optional key-value parameters
• Fragment: #section optional used by the browser, not sent to server

📡 2. DNS Resolution
Here it finds the IP address of example.com. First it checks browser cache, then OS cache, then router cache, then ISP's DNS(Domain Name System) cache, if not cached it queries the DNS server and resolves the domain name to an IP address, like- 93.184.216.34.

🔐 3. Establishing a Secure Connection
The browser establishes a TCP(Transmission Control Protocol) connection (3-way handshake) with the server using the IP address on the specified port (usually 443 for https and 80 for http). If the URL uses HTTPS, a TLS(Transport Layer Security) handshake follows the TCP handshake. It includes key exchange, SSL certificate validation, and encryption setup. This ensures secure communication.

📤 4. HTTP Request
Once the connection is secure(for https) or established(for http), your browser sends an HTTP request to the server. The request includes
HTTP Method: GET, POST etc.
Path: specific resource you requested (e.g. /about).
HTTP version: e.g. HTTP/1.1, HTTP/2, HTTP/3
Headers: these are additional information for example User-Agent, Cookie, Accept, Referer etc.
React SPA often uses HTML5 history API, so server returns the same index.html file for all paths.

🧱 5. Server Process the Request
The web server receives the request, it routes request to the appropriate application, process it (might involve routing, Database queries, run backend logic), generates a response (eg HTML page) and sends back an HTTP response.
For React SPA, it's crucial to configure your server to always return index.html for unknown routes to support client-side routing.

🧾 6. Receiving the HTTP response
The browser receives the HTTP response sent by the server. The response includes
Status Code: 200, 404, 500 etc.
HTTP version: HTTP/1.1
Headers: Content-Type, Content-Length, Set-Cookie, Cache-Control etc.
Body: Actual content of the requested resource(html page, json data etc)

⚛️ 7. Browser Parse HTML- Kicks off React
The browser now:

1. Parses HTML- Builds the DOM Tree
2. Parse CSS- Builds the CSSOM Tree
3. Combines both to form Render Tree
4. Calculates Layout- position and size of elements
5. Paints- draws pixels on the screen As it parses HTML, it encounters <script> and <link> tags and begin fetching resources in parallel(including your React app's bundle). For each of these resources browser repeats step 2-6 in parallel.

🔁 8. Javascript Execution & Page interactivity
As javascript files are downloaded and parsed, they are executed. JS code adds interactivity, fetch more data or modify the DOM (eg, via AJAX, React etc). This can trigger further reflow and repaints. Final outcome you see the full rendered page on screen.

⚛️ Where React comes into Play
In step 7 when the browser encounters script tag containing your React app, it loads and executes the bundled javascript, which includes React core library, react-dom, react-router, app logic and your components. Now React takes over and renders your app inside index.js
ReactDOM.createRoot(root).render(<App />);
at this point React

• Creates virtual DOM
• Renders the App component into RealDOM
• Components are recursively rendered
• Manages state, props and event listeners

If React uses

• Client Side Routing(CSR): React Router reads the current path(/about) and loads the correct route: <Route path="/about" element={<About />} /> Even though the server returns the same index.html. React dynamically renders the correct view based on the URL using React Router.
• Server Side Rendering(SSR): React runs on the server and generates the initial HTML. The Browser receives a fully rendered page, and then React hydrates the page attaching event handlers on the client side.

After Rendering the components react handles the user interaction, listens events, update state, run side effects (useEffect) and re-render UI(efficiently via diffing the virtualDOM).

🏁 Conclusion
This entire process, from typing the URL to seeing a fully rendered webpage, happens in milliseconds to a few seconds, thanks to efficient networking protocols, browser optimizations, and powerful server infrastructure. As a React Developer, understanding these steps empowers you to build better, faster, and more resilient applications.