hardSystem Design

What is the difference between client-side rendering (CSR) and server-side rendering (SSR) in React?

Q: What is the difference between client-side rendering (CSR) and server-side rendering (SSR) in React?

**Core concept (TL;DR).** With **CSR**, the server sends a near-empty HTML shell plus a JS bundle and the **browser** builds the page. With **SSR**, the **server** renders full HTML per request (fast first paint + SEO), then the client **hydrates** it. CSR is app-like and cheap to host but slower to first paint and weaker for SEO; SSR is the reverse trade-off. Where the first HTML is built CSR <text

241 views

Understand the problem

Compare and contrast CSR and SSR, highlighting their respective advantages and disadvantages for React applications.

ssrcsrperformanceseo

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Stuck? AI Nudge Available

Get a conceptual hint to guide your logic without spoiling the final implementation.

Study the solution

The solution is waiting

Give it an honest attempt first — then compare your thinking with the full walkthrough.

Read the code

CSR mount vs SSR render+hydrate

// CSR — browser builds the UI from an empty shell:
//   createRoot(document.getElementById("root")).render(<App />);
//   (initial HTML: <div id="root"></div>)

// SSR — server sends full HTML, client hydrates it:
//   server:  const html = renderToString(<App />);
//   client:  hydrateRoot(document.getElementById("root"), <App />);

// SSG is the same server render done once at BUILD time.
export default function App() {
  return <p style={{ fontFamily: "system-ui", padding: 24 }}>CSR vs SSR vs SSG</p>;
}

Join the discussion

Discussion (0)

No responses yet. Be the first to share what you think.

How do you keep the UI responsive during an expensive update without a Suspense fallback flash?

How did ref handling change in React 19 (ref as a prop, forwardRef, ref cleanup)?