Skip to main content

SSR vs CSR

ReactJunior~2 min read
Suggest an edit

The key difference

CriterionSSR (Server-Side Rendering)CSR (Client-Side Rendering)
Where HTML is renderedOn the serverIn the user's browser
What the user gets on the first requestA ready HTML document with content already insertedAn almost empty HTML file + a JS bundle that then builds the DOM itself
When the user sees contentAlmost immediately after the server respondsOnly after JavaScript loads and runs
SEO optimizationExcellent, search engines see full HTMLPoor without extra solutions (for example, prerendering)
LoadMostly on the server (it does the rendering)Mostly on the client (the browser does all the work)
First load (TTFB)Longer (the server generates HTML)Faster response, but content appears later
Navigation between pagesOften needs new requests to the serverFast, everything works like an SPA with no reload
Development complexityHigher (hydration, shared code for client and server)Simpler (everything is on the client only)

What this looks like in practice

CSR:

  1. The user opens the site.
  2. The server returns a minimal HTML with <div id="root"></div>.
  3. The browser downloads and runs the JS bundle.
  4. The JS code creates the DOM itself and renders the content.
javascript
// index.html <body> <div id="root"></div> <script src="main.js"></script> </body>
javascript
// main.js ReactDOM.render(<App />, document.getElementById('root'));

SSR:

  1. The user opens the site.
  2. The server runs the React code and builds the ready HTML.
  3. The server sends the HTML to the user.
  4. The browser renders the page immediately, then "hydrates" it for interactivity.
javascript
// server const html = ReactDOMServer.renderToString(<App />); res.send(`<html><body><div id="root">${html}</div></body></html>`);

Summary:

  • SSR = content is visible immediately, better for SEO and UX, but more complex and more expensive in server resources.
  • CSR = faster development and navigation, but a slower first render and worse SEO without optimizations.

Short Answer

Interview ready
Premium

A concise answer to help you respond confidently on this topic during an interview.

Suggest an edit