What is the difference between server-side rendering and client-side rendering in React?

What is the difference between server-side rendering and client-side rendering in React?

• A. Server-side rendering renders HTML on the server for the initial page load; Client-side rendering renders markup in the browser after JavaScript runs, with hydration to reconcile server HTML with client code.
• B. CSR renders markup in the browser after JavaScript runs; SSR renders HTML on the server for the initial load, with hydration to reconcile server HTML with client code.
• C. SSR prints static HTML; CSR uses only CSS.
• D. SSR uses Suspense; CSR uses portals.

Answer: (B)

Rendering strategy in React is about where the initial HTML comes from. In client-side rendering, the browser runs the JavaScript bundle to build the UI, producing the markup in the DOM after the JS executes. In server-side rendering, the server generates the HTML for the initial page request and sends that HTML to the browser, so the user sees content right away without waiting for JavaScript to run. When the client loads the server-rendered page, React runs and hydrates that markup—reconciling the server HTML with the client-side code so event handlers and interactivity work correctly without replacing the entire DOM. Hydration is the key bridging step: it attaches the React components to the server-generated HTML, enabling interactivity while preserving the fast, content-first initial load that SSR provides. This explains why SSR often helps with perceived performance and SEO, while CSR can offer quicker interactivity after the bundle loads but may delay the initial visible content. The correct description matches this idea: the browser renders after JavaScript runs, while the server renders the initial HTML and the client hydrates it to become fully interactive. The other options either misstate what SSR or CSR do (for example, claiming CSS-only rendering, or tying SSR/CSR to features like Suspense or portals that aren’t their defining difference).

Rendering strategy in React is about where the initial HTML comes from. In client-side rendering, the browser runs the JavaScript bundle to build the UI, producing the markup in the DOM after the JS executes. In server-side rendering, the server generates the HTML for the initial page request and sends that HTML to the browser, so the user sees content right away without waiting for JavaScript to run. When the client loads the server-rendered page, React runs and hydrates that markup—reconciling the server HTML with the client-side code so event handlers and interactivity work correctly without replacing the entire DOM.

Hydration is the key bridging step: it attaches the React components to the server-generated HTML, enabling interactivity while preserving the fast, content-first initial load that SSR provides. This explains why SSR often helps with perceived performance and SEO, while CSR can offer quicker interactivity after the bundle loads but may delay the initial visible content.

The correct description matches this idea: the browser renders after JavaScript runs, while the server renders the initial HTML and the client hydrates it to become fully interactive. The other options either misstate what SSR or CSR do (for example, claiming CSS-only rendering, or tying SSR/CSR to features like Suspense or portals that aren’t their defining difference).