What is SSR in Next.js?

Next.jsMiddle~1 min read

SSR (Server-Side Rendering) in Next.js is a mode in which the page's HTML is generated on the server on every request, rather than in advance at build time.

How SSR works

The user opens the page
The request goes to the server
The server:

runs the page's code
requests data (DB / API)
generates the HTML

The ready HTML is sent to the user
The browser hydrates the page (React comes alive)

request → server render → HTML → browser → hydrate

How SSR is enabled in the App Router

SSR is enabled automatically if:

a dynamic fetch is used
there is user-specific data
caching is disabled

Explicitly:

export const dynamic = "force-dynamic";

Via `fetch`:

await fetch("https://api.example.com/data", {
  cache: "no-store", // ← SSR
});

When SSR is needed

Use SSR if:

data changes often
there's personalization
auth is used
SEO + freshness matter

Examples:

a personal dashboard
a user profile
an admin panel
search results
tasks with access permissions

Pros of SSR

always fresh data
SEO without compromises
personalization
no client fetch needed for the first screen

Cons of SSR

slower than SSG
server load
more expensive infrastructure
higher TTFB

SSR vs SSG

	SSR	SSG
When it renders	on request	at build time
Freshness	Yes	No
Speed	High	Very high
Personalization	Yes	No
Server	needed	not needed

SSR pairs great with Streaming

tsx

<Suspense fallback={<Skeleton />}>
  <UserStats />
</Suspense>

the page starts displaying immediately
heavy blocks load in later
UX is almost like SSG

Short Answer

Interview ready

Premium

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