# Client-Side Rendering
Course: [React](https://www.devtutorials.ai/learn/react) · Section: Render Modes
Source: https://www.devtutorials.ai/learn/react/rendering/client-side-rendering
> What rendering is, how client-side rendering works, CSR architecture and startup, initial render, re-rendering and the render cycle, the Virtual DOM and diffing, rendering triggers, and a Product Catalog capstone.
## Introduction to Rendering
**Rendering** means turning your components into the HTML that the user sees on the screen.
Your code describes **what** the page should look like. Rendering is the work that makes it real. This work can happen in two places:
- in the **browser** (the client): this is **client-side rendering (CSR)**, the topic of this lesson.
- on the **server**, before the page is sent: this is **server-side rendering (SSR)**, the next lesson.
The choice of where and when to render is called the **render mode**.
Rendering is the step between your code and the page.
## Introduction to Client-Side Rendering
In **client-side rendering**, the server sends an almost empty HTML page and a JavaScript file. The browser runs the JavaScript, and React builds the whole page there.
Every app in this course so far uses CSR. A normal Vite + React app is a CSR app.
### Real-World Example
A bookshop admin dashboard is used only by signed-in staff. The server sends an almost empty `index.html` and a JavaScript bundle. React runs in the browser, requests the orders with `fetch`, and builds the tables and charts.
Search engines do not need to read this page, so CSR is a good choice. After the first load, every screen change is instant.
All the HTML is made by JavaScript in the browser.
This is the whole body of a Vite app's `index.html`. Only one empty `div`:
```html
```
## Benefits of CSR
- **Fast after the first load.** Moving between pages does not reload the page. React only changes what is needed.
- **Feels like an app.** Clicks, typing and filters update the screen at once.
- **Simple to host.** The build is just static files (HTML, JS, CSS). Any static host or CDN can serve them.
- **Light server work.** The server only sends files. Each user's browser does its own rendering.
## CSR Architecture
React is split into parts. Each part has one job:
- **Your components** describe the screen.
- **React** (the `react` package) calls your components and builds a tree of elements, the **Virtual DOM**.
- The **reconciler** compares the new tree with the old one.
- **ReactDOM** (the `react-dom` package) changes the real page to match.
React (the core) works out what changed. ReactDOM does the changing.
### ReactDOM and Root Element
The **root element** is the HTML element where React draws your app, usually `
`. React controls everything inside it.
Two lines connect React to the page:
```tsx
const root = createRoot(document.getElementById("root")!);
root.render();
```
- `createRoot(element)` makes a React root inside that element.
- `root.render()` draws `App` into it.
- The `!` tells TypeScript "this element exists, it is not null".
A page can have more than one root, for example to add React to a small part of an older website. Below, `main.tsx` makes two roots.
Small widget (root 2)
);
}
`,
"main.tsx": `import { createRoot } from "react-dom/client";
// root 1: the usual root div
createRoot(document.getElementById("root")!).render();
// root 2: a new element, added to the page with plain JavaScript
const widgetBox = document.createElement("div");
document.body.appendChild(widgetBox);
createRoot(widgetBox).render();
`,
}}
/>
### React Application Startup Process
When a user opens a CSR app, these steps run once, in order:
1. The browser loads `index.html`. The `root` div is empty.
2. The browser loads and runs `main.tsx` (the **entry point**).
3. `createRoot` connects React to the `root` div.
4. `render()` asks React to draw `App` and all its children.
5. React creates the DOM nodes and puts them in `root`. The user sees the page.
This is the start of every Vite React app.
The lab prints the `root` div before and after React. Before React, it has 0 children.
Book Corner
Made in the browser by React.
);
}
`,
"main.tsx": `import { createRoot } from "react-dom/client";
const rootElement = document.getElementById("root")!;
console.log("1. Before React: root has " + rootElement.childNodes.length + " children");
const root = createRoot(rootElement);
root.render();
console.log("2. render() was called");
// React draws a moment later. Look again after a short wait.
setTimeout(() => {
console.log("3. After React: " + rootElement.innerHTML);
}, 50);
`,
}}
/>
### Browser Rendering Workflow
React makes DOM nodes, but the **browser** turns them into pixels. For a CSR page, the browser does this:
1. **Read the HTML** and build a first, almost empty page.
2. **Download the JavaScript** bundle.
3. **Run the JavaScript.** React creates the DOM nodes.
4. **Build the DOM** tree from those nodes.
5. **Layout:** work out the size and place of each element.
6. **Paint:** draw the pixels on the screen.
Until step 6, the user sees a blank page. That is the main cost of CSR.
The screen stays blank until the paint step at the end.
## React Rendering Fundamentals
### Initial Render
The **initial render** is the first time React draws your app. It happens once, when `root.render()` runs. React calls every component, and creates **all** the DOM nodes from nothing.
### Re-rendering
A **re-render** means React calls a component function again, to get its new TSX. It happens after the initial render, when something changes.
A re-render does **not** mean the whole page is rebuilt. React compares the new result with the old one, and changes only the parts that differ.
The lab below shows re-renders. Each box flashes when its component renders. Click the buttons and watch which boxes flash.
{name} rendered {renders.current} time(s)
{children}
);
}
function Child({ label }: { label: string }) {
return ;
}
const [count, setCount] = useState(0);
const [title, setTitle] = useState("Books");
return (
count = {count}, title = {title}
{" "}
);
}
`,
"flash.css": `.box {
border: 2px solid #2b59c3;
border-radius: 8px;
padding: 8px;
margin: 6px 0;
font-family: sans-serif;
animation-duration: 0.8s;
}
@keyframes flashA { from { background: #ffe58a; } to { background: transparent; } }
@keyframes flashB { from { background: #ffe58a; } to { background: transparent; } }
`,
"main.tsx": `import { createRoot } from "react-dom/client";
createRoot(document.getElementById("root")!).render();
`,
}}
/>
Notice: "Child: Always the same" also flashes. Its props did not change, but its parent (App) re-rendered, so it re-renders too.
### Render Cycle
Every update goes through the same four steps, called the **render cycle**:
1. **Trigger.** Something asks for an update: the first load, or a state change.
2. **Render.** React calls the components and builds the new Virtual DOM. The screen does not change yet.
3. **Commit.** React applies the changes to the real DOM. Now the user sees them.
4. **Effects.** React runs your `useEffect` code.
Render is only calculating. Commit is when the screen changes.
Step through the cycle yourself. Click **Next step** to move through the four steps for one button click.
{steps[step].text}
);
}
`,
"main.tsx": `import { createRoot } from "react-dom/client";
createRoot(document.getElementById("root")!).render();
`,
}}
/>
Easy Way to Remember: trigger, render, commit, effects. Render only calculates. Commit is when the screen changes.
The real order is in the console of this next lab. Children render after their parent, but child effects run **before** the parent's effect.
);
}
`,
"main.tsx": `import { createRoot } from "react-dom/client";
createRoot(document.getElementById("root")!).render();
`,
}}
/>
## Virtual DOM and Updates
### Virtual DOM
The **DOM** is the browser's tree of real page elements. Changing it is slow, because the browser must do layout and paint again.
The **Virtual DOM** is a light copy of the page made of plain JavaScript objects. `
Hello
` becomes an object like:
```ts
{ type: "h1", props: { className: "title", children: "Hello" } }
```
Making and comparing these objects is very fast. React changes the Virtual DOM first, and touches the real DOM only where needed.
Wings of Fire
₹350
);
console.log("card children: " + card.props.children.length);
console.log("first child type: " + card.props.children[0].type);
return card;
}
`,
"main.tsx": `import { createRoot } from "react-dom/client";
createRoot(document.getElementById("root")!).render();
`,
}}
/>
### Reconciliation
**Reconciliation** is how React updates the page. On every re-render:
1. React builds a **new** Virtual DOM tree.
2. It compares it with the **old** tree.
3. It changes only the real DOM nodes that differ.
The lab watches the real DOM with a `MutationObserver`, a browser tool that reports every DOM change. Click the button: only one text changes. The heading and list are never touched.
Book Corner
The Alchemist
Wings of Fire
);
}
`,
"main.tsx": `import { createRoot } from "react-dom/client";
createRoot(document.getElementById("root")!).render();
`,
}}
/>
### Diffing Algorithm
**Diffing** is the "compare" step. React uses two simple rules, so it stays fast:
- **Different type, new tree.** If an element changes type (`
` becomes ``), React removes the old part and builds a new one. State inside it is lost.
- **Same type, update.** If the type is the same, React keeps the element and changes only the props that differ.
In lists, React uses the **key** to match old items with new ones. So keys must be stable, like an `id`.
The h1 and the div stay as they are. That is why React is fast.
Try both rules:
- Click **+1** a few times, then **Switch wrapper**. The counter goes back to 0, because `div` became `section`.
- Type in the first box of each list, then click **Add at top**. With `key={index}` the text stays in the wrong row. With `key={book.id}` it moves with its book.
{useSection ? (
) : (
);
}
`,
"main.tsx": `import { createRoot } from "react-dom/client";
createRoot(document.getElementById("root")!).render();
`,
}}
/>
Left: every row looks changed. Right: React sees one new row.
## Rendering Triggers
A component renders again only when something tells React to. There are three common triggers.
A user action usually calls a setter, so it becomes a state change.
### State-Driven Rendering
When a component's **state** changes through its setter, React re-renders it. A normal variable does **not** do this: React never knows it changed.
### Props-Driven Rendering
When a parent re-renders and passes new **props**, the child re-renders and shows the new values. The child needs no state of its own.
### User Interaction and UI Updates
Users do not change state directly. They click and type. Your **event handler** calls a setter, and that starts the render cycle:
**click → handler → setState → re-render → screen updates**
The lab shows all three. `App` owns the state, `PriceTag` gets props, and the buttons and slider are the user interaction. The last button changes a normal variable, and nothing happens.
Atomic Habits: ₹{price}₹{final}
);
}
const [discount, setDiscount] = useState(0);
let normal = 0;
return (
setDiscount(Number(e.target.value))}
/>{" "}
{discount}% off
{" "}
);
}
`,
"main.tsx": `import { createRoot } from "react-dom/client";
createRoot(document.getElementById("root")!).render();
`,
}}
/>
Setting state to the same value it already has (for example `setDiscount(0)` when it is 0) usually does not re-render. React sees nothing changed and stops.
## Advantages and Limitations of CSR
| Advantages | Limitations |
|---|---|
| Instant page changes after loading | Blank page until the JavaScript loads and runs |
| Rich, app-like interaction | Slow first view on weak phones and networks |
| Hosted as simple static files | Some search engines and link previews see an empty page |
| Little work for the server | Large bundles make the wait longer |
CSR is a great fit for apps used after login, like dashboards, admin panels and tools. For public pages that must load fast and appear in search, look at SSR in the next lesson.
## Capstone Project: Product Catalog
### What is Capstone Project
A **capstone project** is one small but complete app that uses everything from the lesson. Here you build a **Product Catalog** for Book Corner, rendered fully in the browser (CSR). Users can search products, filter by category, and add items to a cart.
Data goes down as props. Changes come up through onChange and onAdd.
### Build reusable product components
Start with `types.ts` (the `Product` shape), `data.ts` (8 sample products) and one reusable component, `ProductCard`. It gets a `product` and an `onAdd` function as props. Out-of-stock items show a message and a disabled button.
);
}
`,
"types.ts": `export type Category = "Books" | "Stationery" | "Bags";
id: number;
name: string;
category: Category;
price: number;
rating: number;
inStock: boolean;
}
`,
"data.ts": `import type { Product } from "./types";
{ id: 1, name: "The Alchemist", category: "Books", price: 299, rating: 4.6, inStock: true },
{ id: 2, name: "Wings of Fire", category: "Books", price: 350, rating: 4.8, inStock: true },
{ id: 3, name: "Atomic Habits", category: "Books", price: 499, rating: 4.7, inStock: false },
{ id: 4, name: "Gel Pen Set", category: "Stationery", price: 120, rating: 4.2, inStock: true },
{ id: 5, name: "A5 Notebook", category: "Stationery", price: 180, rating: 4.4, inStock: true },
{ id: 6, name: "Highlighter Pack", category: "Stationery", price: 150, rating: 4.0, inStock: true },
{ id: 7, name: "Canvas Tote Bag", category: "Bags", price: 399, rating: 4.3, inStock: true },
{ id: 8, name: "Laptop Backpack", category: "Bags", price: 1299, rating: 4.5, inStock: false },
];
`,
"styles.css": `.shop { max-width: 640px; font-family: sans-serif; }
.shop h1 { margin: 0 0 8px; color: #2b59c3; }
.toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.search { flex: 1; min-width: 160px; padding: 7px 10px; border: 1px solid #bbb; border-radius: 8px; }
.cats { display: flex; gap: 6px; }
.cats button { padding: 5px 10px; border: 1px solid #bbb; border-radius: 999px; background: white; cursor: pointer; }
.cats button.active { background: #2b59c3; border-color: #2b59c3; color: white; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.card { border: 1px solid #ddd; border-radius: 10px; padding: 10px; display: grid; gap: 4px; background: white; }
.card .name { font-weight: bold; }
.card .meta { color: #666; font-size: 13px; }
.card .price { font-size: 18px; }
.card .out { color: #b42318; font-size: 13px; }
.card button { padding: 5px; border-radius: 6px; border: 1px solid #2b59c3; background: #2b59c3; color: white; cursor: pointer; }
.card button:disabled { background: #ccc; border-color: #ccc; cursor: default; }
.cart { background: #fff3cd; padding: 6px 10px; border-radius: 8px; }
.empty { color: #666; }
`,
"main.tsx": `import { createRoot } from "react-dom/client";
createRoot(document.getElementById("root")!).render();
`,
}}
/>
## Download Project Files
### Download CSR Project Source Code
The complete Product Catalog is ready as a real Vite + React + TypeScript project, with the same code as the final lab in a proper folder structure. It is a pure CSR app: no server or API is needed.
Download CSR Project: [Download Product Catalog Project](/downloads/react/csr-product-catalog.zip)
```
product-catalog/
package.json scripts and dependencies
vite.config.ts Vite settings
index.html the page with the empty root div
src/
main.tsx createRoot + render
App.tsx state, filtering and layout
index.css styles
types/ Product and Category types
data/ the sample products
components/ ProductCard, ProductList, SearchBar, CategoryFilter, CartSummary
hooks/ useProductFilter (search + category)
```
### Project Setup Instructions
1. Install **Node.js** 18 or newer from nodejs.org, if you do not have it.
2. Download the ZIP with the link above, and unzip it. You get a folder called `product-catalog`.
3. Open a terminal in that folder (in VS Code: File, Open Folder, then Terminal, New Terminal).
4. Install the packages, then start the app:
```bash
npm install
npm run dev
```
The app opens at `http://localhost:5173`. Press `Ctrl + C` in the terminal to stop it. To make a production build, run `npm run build`.
After the app starts, open the browser's developer tools (F12) and view the page source. You will see only the empty `root` div. That is client-side rendering: all the products are drawn by JavaScript.
## Common mistakes
| Mistake | What you see | Fix |
|---|---|---|
| Changing a normal variable and expecting the screen to update | Nothing changes on the screen | Use state: `useState` and its setter |
| Forgetting `root.render()` | An empty page, no errors | Call `render` after `createRoot` |
| Calling `createRoot` twice on the same element | A console warning | Create the root once, then call `root.render` |
| Using the array index as `key` in a list that changes | Inputs or state stay in the wrong row | Use a stable id: `key={item.id}` |
| Storing the filtered list in state as well | The list and the filters get out of sync | Work it out from state on each render (`useMemo` if slow) |
| Fetching or changing the DOM during render | Repeated requests, strange bugs | Put side effects in `useEffect` |
## Check Yourself
## Exercises
## What to Remember
- Rendering turns components into HTML. In CSR, the browser does it: the server sends an empty `root` div and JavaScript, and `createRoot(...).render()` starts the app.
- The first render builds everything. Later re-renders follow trigger, render, commit, effects. React diffs the Virtual DOM and changes only what differs; keys match list items.
- State changes, new props and user actions trigger re-renders. CSR is smooth after loading, but the first view is blank until the JavaScript runs.
Next: Server-Side Rendering