Understanding CSR, SSR, and SSG — What Actually Happens Behind the Scenes
Modern web development often talks about three rendering methods:
Client-Side Rendering (CSR)
Server-Side Rendering (SSR)
Static Site Generation (SSG)
Frameworks like React and Next.js support these approaches — but many developers are confused about what truly happens under the hood.
This article explains:
What each method does
When API calls happen
What you see in “View Page Source”
What hydration really means
The real request flow for each approach
Let’s break it down clearly.
Client-Side Rendering (CSR)
What It Is
In Client-Side Rendering:
The browser builds the page using JavaScript after the initial HTML loads.
The server does not send fully rendered content.
It sends a minimal HTML shell and a JavaScript bundle.
What You See in “View Page Source”
If you right-click → View Page Source, you’ll usually see something like:
<div id="root"></div>
<script src="/main.js"></script>
There is no real content inside the div.
Why?
Because the server never rendered it.
What Actually Happens (Step-by-Step Flow)
Browser sends request to
/.Server returns basic HTML + JS file.
Browser downloads JavaScript.
JavaScript executes.
React runs in the browser.
API requests are made from the browser.
Data returns as JSON.
React maps data into HTML.
DOM updates and content appears.
Where API Calls Happen
In CSR:
API calls happen inside the browser
After JavaScript executes
Usually inside
useEffect()or similar logic
The server does not fetch data for the page.
Hydration?
There is no hydration in CSR.
React builds everything from scratch in the browser.
Server-Side Rendering (SSR)
What It Is
In Server-Side Rendering:
The server builds the full HTML before sending it to the browser.
JavaScript runs on the server using Node.js.
What You See in “View Page Source”
Now when you check View Page Source, you’ll see:
<div>
<div>Phone</div>
<div>Laptop</div>
</div>
The content is already there.
Because the server rendered it.
What Actually Happens (Step-by-Step Flow)
Browser requests
/products.Server receives request.
Server runs JavaScript (Node.js).
Server makes API calls.
API returns JSON.
React renders components on server.
Server converts React output into HTML string.
Server sends complete HTML to browser.
Browser displays content immediately.
JavaScript bundle loads.
React hydrates the page.
Where API Calls Happen
In SSR:
API calls happen on the server
Before the page is sent
The browser never sees those API requests
What Is Hydration?
Hydration happens after the HTML loads in the browser.
React:
Re-runs components in the browser
Compares them to existing DOM
Attaches event listeners
Activates state and interactivity
Hydration does not rebuild the page.
It connects JavaScript behavior to the already rendered HTML.
Static Site Generation (SSG)
What It Is
In Static Site Generation:
Pages are rendered at build time, not when users visit.
The rendering happens once during deployment.
What You See in “View Page Source”
You will see fully rendered HTML — just like SSR.
Example:
<div>
<div>Phone</div>
<div>Laptop</div>
</div>
But the difference is:
This HTML was created earlier — during build.
What Actually Happens (Step-by-Step Flow)
During build:
Build process runs.
API calls are made.
Data is fetched.
React renders HTML.
HTML files are saved to disk.
When a user visits:
Browser requests page.
Server sends pre-built HTML file.
Browser displays instantly.
JavaScript loads.
React hydrates.
Where API Calls Happen
In SSG:
API calls happen at build time
Not when users visit
Not in the browser
Clear Comparison of API Behavior
| Method | Where API Calls Happen | When |
|---|---|---|
| CSR | Browser | After page loads |
| SSR | Server | On every request |
| SSG | Server (build process) | During deployment |
What “View Page Source” Really Shows
This is important:
View Page Source shows only the original HTML sent by server.
It does NOT show changes made by JavaScript after page loads.
So:
CSR → Mostly empty HTML
SSR → Fully rendered HTML
SSG → Fully rendered HTML
If you want to see live DOM changes, use:
Developer Tools → Elements tab
Final Simple Mental Model
Think in terms of when HTML is created:
CSR → HTML created in browser
SSR → HTML created on server (every request)
SSG → HTML created during build
Hydration happens only in SSR and SSG.
CSR does not hydrate — it renders from scratch.
The True Flow of Modern Web Apps
Today, most modern frameworks mix these methods:
Static pages use SSG
Dynamic pages use SSR
Dashboards use CSR
