What is server-side rendering (SSR) in React?
Why Interviewers Ask This
This tests whether you can apply React.js knowledge to real-world scenarios. Interviewers are looking for clarity of thought and evidence that you've encountered this in production code.
Answer
Server-Side Rendering (SSR) renders React components on the server and sends the resulting HTML to the browser, instead of sending an empty HTML shell and rendering everything client-side. How it works: (1) A request comes in. (2) The server runs React to produce an HTML string. (3) The browser receives and displays the HTML immediately (fast First Contentful Paint). (4) React hydrates the HTML on the client — attaches event listeners and takes over interactivity. Benefits: faster initial page load (users see content before JavaScript executes); better SEO (search engines see the content); faster Time to First Byte. Challenges: server must be capable of running Node.js; window/document are not available during server render; hydration must match server output exactly or mismatches occur. Hydration mismatches: if server and client render different content, React warns and re-renders client-side — defeats the purpose. Frameworks: Next.js, Remix, and Gatsby automate SSR configuration. React 18 introduces streaming SSR — the server can stream HTML progressively rather than waiting for the entire page.
Pro Tip
This topic has React.js-specific nuances that differ from general programming. Highlighting those nuances in your answer shows expertise rather than generic knowledge.