Where your page gets rendered
Day 129 of 149
👉 Full deep-dive with code examples
The Restaurant Analogy
Two types of restaurants:
Full-service restaurant (SSR):
- Kitchen prepares complete meal
- Served ready to eat
- You just enjoy it
Build-your-own taco bar (CSR):
- You get ingredients
- You assemble at your table
- More interactive, but takes time
SSR vs CSR is about where the webpage gets built!
Server-Side Rendering (SSR)
The server builds the complete HTML page:
User visits → Server builds page → Sends complete HTML → User sees content immediately
Benefits:
- Fast first load (content right away)
- Great for SEO (search engines see full content)
- Works without JavaScript
Downsides:
- Every click might need a new page from server
- Server does more work
Client-Side Rendering (CSR)
The browser builds the page with JavaScript:
User visits → Server sends empty shell → Browser runs JavaScript → Content appears
Benefits:
- After first load, navigation is instant
- Feels like an app, not a website
- Server does less work
Downsides:
- Blank page until JavaScript loads
- Search engines may not see content
- Needs JavaScript to work
When To Use Which
Choose SSR when:
- SEO matters (blogs, e-commerce)
- Fast first load is critical
- Users might have slow devices
Choose CSR when:
- Building app-like experiences (dashboards)
- Lots of interactivity
- Users stay and explore (not quick visits)
Modern approach:
- Many sites use BOTH (hybrid)
- SSR for first load, CSR for navigation
In One Sentence
SSR has the server build pages (fast first load, good SEO), while CSR has the browser build them (app-like experience after initial load).
🔗 Enjoying these? Follow for daily ELI5 explanations!
Making complex tech concepts simple, one day at a time.
Top comments (0)