DEV Community

Debug Diaries
Debug Diaries

Posted on

How a Browser Renders a Webpage — And Where React, CSR, and SSR Fit In

#react #webdev #frontend #javascript

When we type a URL in the browser and press Enter, a lot happens behind the scenes before the webpage appears on the screen. Understanding this process is important for frontend developers because it explains why some websites load instantly while others show a blank screen first.

In this article, we’ll walk through:

  • How a browser processes a request
  • How the UI is rendered
  • Where React, Client-Side Rendering (CSR), and Server-Side Rendering (SSR) come into play

1. The Request Process

When a user enters a URL like:

https://example.com
Enter fullscreen mode Exit fullscreen mode

the browser performs several steps.

Step 1: Check Cache

The browser first checks whether the website resources are already stored locally in cache.

Step 2: DNS Lookup

If not found, the browser asks the Domain Name System to convert the domain name into an IP address.

Example:

example.com → 93.184.216.34
Enter fullscreen mode Exit fullscreen mode

Step 3: Establish Connection

The browser opens a connection with the server using Transmission Control Protocol.

If the website uses HTTPS, a secure connection is established using Transport Layer Security.

Step 4: Send HTTP Request

The browser sends a request like:

GET /index.html HTTP/1.1
Host: example.com
Enter fullscreen mode Exit fullscreen mode

2. Server Response

The server sends back resources such as:

  • HTML
  • CSS
  • JavaScript
  • Images
  • Fonts

These resources are often sent in chunks (streams), meaning the browser starts processing them before the entire file finishes downloading.

3. HTML Parsing and DOM Creation

Once the browser receives HTML, it begins parsing it immediately.

The browser converts HTML elements into a tree structure called the Document Object Model.

Example HTML:

<body>
  <h1>Products</h1>
  <p>Item 1</p>
</body>
Enter fullscreen mode Exit fullscreen mode

DOM structure:

body
 ├── h1
 └── p
Enter fullscreen mode Exit fullscreen mode

This structure allows JavaScript to access and modify elements dynamically.

4. CSS Parsing and CSSOM

When the browser encounters CSS files or <style> tags, it creates another structure called the CSS Object Model.

This maps selectors to their styles.

Example:

p {
  color: blue;
}
Enter fullscreen mode Exit fullscreen mode

The browser builds a tree of style rules and applies them to the DOM elements.

5. Render Tree Creation

The browser combines:

  • DOM
  • CSSOM

to create a Render Tree.

This tree contains only visible elements.

Elements excluded include:

  • <meta>
  • <head>
  • elements with display: none

6. Layout (Reflow)

Next, the browser calculates the position and size of each element.

It determines:

  • width and height
  • position on the X and Y axis
  • how elements flow on the page

This step ensures the UI fits the device viewport correctly.

7. Paint

Once layout is calculated, the browser fills visual details such as:

  • colors
  • borders
  • text
  • shadows
  • images

At this stage the page becomes visually complete.

8. Compositing

Some elements are rendered on separate layers, such as:

  • sticky headers
  • popups
  • animations
  • transformed elements

These layers are sent to the GPU to render efficiently.

This final step is called compositing.

9. Where JavaScript Fits In

When the browser encounters a script:

<script src="app.js"></script>
Enter fullscreen mode Exit fullscreen mode

HTML parsing pauses, and the browser:

  1. downloads the JavaScript
  2. executes it
  3. resumes HTML parsing

This is why JavaScript can block page rendering.

To avoid blocking, developers use:

<script defer src="app.js"></script>
<script async src="analytics.js"></script>
Enter fullscreen mode Exit fullscreen mode
  • async executes immediately after download
  • defer executes after HTML parsing finishes

10. Client-Side Rendering (CSR)

Many modern web apps built with React use Client-Side Rendering.

In CSR, the server sends minimal HTML:

<body>
  <div id="root"></div>
  <script src="main.js"></script>
</body>
Enter fullscreen mode Exit fullscreen mode

The browser initially sees:

empty page
Enter fullscreen mode Exit fullscreen mode

Then JavaScript runs and React builds the UI.

Example React code:

ReactDOM.createRoot(root).render(<App />)
Enter fullscreen mode Exit fullscreen mode

React generates the DOM elements dynamically.

User Experience 

page loads
↓
blank screen
↓
JavaScript loads
↓
UI appears
Enter fullscreen mode Exit fullscreen mode

11. Server-Side Rendering (SSR)

Frameworks like Next.js use Server-Side Rendering.

Instead of sending empty HTML, the server renders the React components and sends fully built HTML.

Example response:

<div id="root">
  <h1>Products</h1>
  <p>Item 1</p>
</div>
Enter fullscreen mode Exit fullscreen mode

Now the browser displays content immediately.

12. Hydration

After SSR HTML loads, JavaScript still downloads.

React then attaches event handlers to the existing HTML.

This process is called Hydration.

Before hydration:

button visible but not clickable
Enter fullscreen mode Exit fullscreen mode

After hydration:

button becomes interactive
Enter fullscreen mode Exit fullscreen mode

CSR vs SSR Comparison

Feature CSR SSR
Initial HTML Empty Fully rendered
First load Blank screen Content appears instantly
SEO Limited Better
Rendering location Browser Server

Understanding how the browser renders a webpage helps frontend developers:

  • optimize performance
  • avoid render-blocking issues
  • improve user experience
  • choose the right rendering strategy

CSR is great for highly interactive applications, while SSR improves initial load performance and SEO.

Modern frameworks like Next.js combine both approaches to deliver the best user experience.

Top comments (0)