From URL to React: What Happens When You Type URL and 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 focused 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, if not it treat it as a search query, if valid it breaks it into components like-
https://example.com:443/about?ref=blog#section
- Protocol:
https/http
specifies how data transfer - Hostname:
example.com
domain name - Port:
443(https) / 80(http)
default ports - Path:
/about
specific resource - Query:
?ref=blog
query string - Fragment:
#fragment
optional used by browser only
๐ก 2. DNS Resolution
Here it finds the IP address of example.com
. First it check for cache in browser, then OS, then router, then ISP’s DNS(Domain Name System) cache, if not cached it queries the DNS server and gets an IP like- 93.184.216.34.
๐ 3. Establishing a Secure Connection
Browser establish 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, an additional TLS(Transport Layer Security) handshake occurs immediately after the TCP handshake. This encrypts the communication using exchange of keys and SSL certificate validation. Now the connection is secure.
๐ค 4. HTTP Request
Once the connection is secure(for https) or established(for http), your browser sends a http request to the server. This request includes
- HTTP Method: GET, POST etc.
- Path: specific resource you requested (eg /about).
- HTTP version: eg HTTP/1.1, HTTP/2, HTTP/3
- Headers: these are additional information for eg User-Agent, Cookie, Accept, Referer etc.
For most React spa, server returns the same index.html file regardless of the path.
๐งฑ 5. Server Process the Request
The web server receives the request, it routes the request to appropriate application, process it (might involve routing, DB query, run backend logic), generates a response (eg HTML page) and sends back an HTTP response.
For react if you are using client side routing, it’s crucial to configure your server to always return index.html for unknown routes.
๐งพ 6. Receiving the HTTP response
The browser receives/ server sends back an HTTP response. The response includes
- Status Code: 200, 404, 500 etc
- HTTP version
- 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:
- Parses HTML- DOM Tree
- Parse CSS- CSSOM Tree
- Combine both- Render Tree
- Calculates Layout- position and size of elements
- Paints pixels on screen
As HTML parse going on, it discovers other resources needed for the page such as js files, api calls, images or fonts. 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 add 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 once the script tag bundled with react app are found, React comes into the picture, this script tag includes react core library, react-dom, react-router, app logic and your components. Browser loads & execute these bundled javascript. Now react takes over and renders your app inside your index.js
ReactDOM.createRoot(root).render(<App />);
at this point
- React creates virtual DOM
- It renders the App component into RealDOM
- React components are recursively rendered into HTML elements
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 gave the same index.html. React renders the right page based on the URL using React Router.- Server Side Rendering(SSR):
React runs on the server and generates full HTML. This HTML is sent to the client browser. Then React hydrates the page on client side and binds event handlers.
After Rendering the components react handles the user interaction, listens events, update state, run side effects (useEffect) and rerender UI(efficiently via diffing the virtualDOM).
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 infratructure.