hardFrontend

What is server-side rendering (SSR) and when would you use it with React?

Q: What is server-side rendering (SSR) and when would you use it with React?

**Core concept (TL;DR).** SSR renders your React components to **HTML on the server** for each request and sends ready-to-display markup; the client then **hydrates** it to add interactivity. Use it when you need a **fast first paint** and strong **SEO** — content/marketing sites, e-commerce, anything indexed or latency-sensitive. In practice you use a framework like **Next.js**. Server renders HTML → client hydrates server</tex

767 views

Understand the problem

Explores advanced rendering techniques and their benefits.

ssrperformanceseonext.js

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

The server-render → hydrate shape

// SERVER (Node): produce HTML from the React tree
//   import { renderToString } from "react-dom/server";
//   const html = renderToString(<App />);
//   res.send('<div id="root">' + html + '</div><script src="/client.js">');

// CLIENT: adopt that HTML instead of rebuilding it
//   import { hydrateRoot } from "react-dom/client";
//   hydrateRoot(document.getElementById("root"), <App />);

// In practice a framework (Next.js) does all of this for you.
export default function App() {
  return <h1 style={{ fontFamily: "system-ui" }}>Rendered on the server, hydrated on the client.</h1>;
}

Join the discussion

Discussion (0)

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

How do Suspense data-fetching waterfalls happen, and how do you avoid them?

React Server Components vs SSR — what is the real difference?