Suggest an editImprove this articleRefine the answer for “What is SSR and why is it needed?”. Your changes go to moderation before they’re published.Approval requiredContentWhat you’re changing🇺🇸EN🇺🇦UAPreviewTitle (EN)Short answer (EN)**SSR (Server-Side Rendering)** is an approach where the HTML page is generated on the server, and the browser receives ready-made markup instead of an empty `<div id="root">`. **Key point:** SSR is needed to improve SEO, speed up the first paint, and improve user experience quality.Shown above the full answer for quick recall.Answer (EN)Image**SSR (Server-Side Rendering)** is an approach where the HTML page **is generated on the server**, and the browser receives ready-made markup instead of an empty `<div id="root">`. Simply put: > CSR: JS first, then content > SSR: content first, then JS --- ## How it works Using **Next.js** as an example: 1. The user requests a page 2. The server executes the React code 3. It generates **ready HTML** 4. The browser immediately displays the page 5. JS "hydrates" it -> interactivity appears --- ## How it works without SSR (CSR) ```txt HTML → empty ↓ JS loads ↓ React executes ↓ content appears ``` slow First Paint bad for SEO blank screen on weak devices --- ## How it works with SSR ```txt HTML → content already present ↓ page is visible immediately ↓ JS connects ↓ interactivity ``` fast SEO-friendly better UX --- ## Why SSR is needed ### 1. SEO Search engines get: - headings - text - meta tags Not an empty page. --- ### 2. Fast First Contentful Paint The user **immediately** sees content: - pages feel faster - higher conversion - fewer bounces --- ### 3. Predictable UX - works even on slow internet - fewer "blank screens" - better for mobile --- ### 4. Suits dynamic data SSR is ideal when: - data depends on the request - auth / cookies are needed - content is personalized --- ## When SSR should NOT be used admin panels purely interactive applications pages with no SEO value CSR is simpler and cheaper there. --- ## SSR in Next.js In Next.js, SSR is enabled **by default** for pages with server data: - Server Components - `fetch()` on the server - access to the DB and cookies - rendering on every request --- ## Short interview answer > **SSR is server-side rendering of a React application, where the HTML is generated on the server. It is needed to improve SEO, speed up the first paint, and improve user experience quality.**For the reviewerNote to the moderator (optional)Visible only to the moderator. Helps review go faster.