<strong>Client-Side Rendering (CSR)</strong> is when JavaScript in the browser builds the HTML after the page loads. The server sends a minimal HTML file and JavaScript does all the rendering, making it great for interactive apps but slower initial load.
The IKEA Furniture Analogy
CSR is like IKEA furniture—the server sends you a flat-pack (minimal HTML + JS), and you assemble it yourself in your browser. It takes time to build, but once done, it's fully interactive.
Server (IKEA)
Sends flat-pack
JavaScript (You)
Assembles furniture
Browser (Your Home)
Where it's built
Requests Page
Sends HTML + JS
Renders Content
Browser requests page
User visits your website
Server sends minimal HTML
Just a shell with <div id='root'> and JS files
Browser downloads JavaScript
React, Vue, or other framework code
JavaScript executes
Fetches data from API and builds the UI
Page becomes interactive
User can now interact with the app
Wrong
"CSR is always slower than SSR"
Correct
CSR has <strong>slower initial load but faster navigation</strong>. After the first load, navigating between pages is instant because everything is already in the browser.
Gmail using CSR:
Initial load takes a moment (downloading JS)
Once loaded, switching between emails is instant
No page refreshes when reading emails
Feels like a desktop app, not a website