CSR vs SSR Explained
· By Saurabh Editorial · Web
Client-side vs server-side rendering — trade-offs, use cases, and how to pick the right strategy.
The core difference
How CSR works
How SSR works
Trade-offs at a glance
The hybrid models
CSR ships an empty HTML shell plus JavaScript. The browser fetches data and renders the UI. SSR renders HTML on the server, so the user sees content on the first response. The choice shapes performance, SEO, and infrastructure cost.
- Server returns a near-empty index.html and a JS bundle.
- Browser downloads, parses, and executes the bundle.
- JS fetches data from APIs and renders the DOM.
- User finally sees content after the JS round trip.
- Browser requests a route.
- Server fetches data, renders HTML, and streams it back.
- User sees content immediately.
- JS hydrates the page to make it interactive.
- SSG: HTML built once at deploy time. Fastest and cheapest.
- ISR: SSG with timed revalidation — fresh but cacheable.
- Streaming SSR: HTML chunks sent as data resolves.
- RSC: Server Components keep heavy logic off the client.