How does server-side rendering work in React?

The short answer

Server-side rendering (SSR) means the server runs your React components and generates HTML before sending it to the browser. The user sees a fully rendered page immediately instead of waiting for JavaScript to download and build the UI. After the HTML loads, React "hydrates" it on the client side to make it interactive.

The SSR process

1. Browser requests a page
2. Server runs React components and generates HTML
3. Server sends the HTML to the browser
4. Browser displays the HTML immediately (user can see content)
5. Browser downloads the JavaScript bundle
6. React hydrates the HTML — attaches event handlers and state
7. Page is now fully interactive

Why use SSR

Faster first paint: The user sees content immediately because the server sends rendered HTML. With client-side rendering, the user sees a blank page until JavaScript loads and runs.

Better SEO: Search engine crawlers can read the server-rendered HTML directly. With client-side rendering, crawlers might see an empty page if they do not execute JavaScript.

Better for slow devices: Older phones and slow networks benefit from SSR because the heavy rendering work happens on the server, not on the user's device.

SSR with Next.js

Next.js is the most popular way to do SSR with React:

Copy
// Next.js App Router — server component by default
async function ProductPage({ params }) {
  const product = await fetch(
    `https://api.example.com/products/${params.id}`
  ).then((r) => r.json());
  return (
    <div>
      <h1>{product.name}</h1>
      <p>${product.price}</p>
    </div>
  );
}

The component runs on the server, fetches data, and sends the rendered HTML to the browser. The user does not wait for a loading spinner.

SSR tradeoffs

Pros:

• Faster initial page load
• Better SEO
• Works without JavaScript (the HTML is already there)

Cons:

• Server handles more work (rendering for every request)
• Time to interactive can be delayed (HTML is visible but not interactive until hydration completes)
• Some browser APIs (window, localStorage) are not available on the server
• More complex development and deployment

Things to watch out for

• No window or document on the server — use useEffect for client-only code
• Hydration mismatches — the server HTML must match what the client renders
• Data fetching on the server — you need to fetch data before rendering, not in useEffect

Why interviewers ask this

SSR is standard in modern React development, especially with Next.js. Interviewers want to see if you understand how it works, what problems it solves, and what challenges it introduces. This is especially important at companies that care about performance and SEO.