Suggest an edit

Improve this article

Refine the answer for “What is SSR in Next.js?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

**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

1. The user opens the page
2. The request goes to the server
3. The server:
  - runs the page's code
  - requests data (DB / API)
  - **generates the HTML**
4. The ready HTML is sent to the user
5. 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:

```ts
export const dynamic = "force-dynamic";
```

### Via `fetch`:

```ts
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

Markdown · drag & drop images · ⌘B / ⌘I shortcuts322 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.