Skip to main content

What is SSR and why is it needed?

Next.jsMiddle~1 min read
Suggest an edit

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.

Short Answer

Interview ready
Premium

A concise answer to help you respond confidently on this topic during an interview.

Suggest an edit