Suggest an edit

Improve this article

Refine the answer for “What does middleware do in SSR?”. 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)

## What middleware is in an SSR context

**Middleware** is a **function that runs between**:

> the moment the server **receives a request**,
> and
> the moment it **starts rendering HTML and sending the response**.

You could say:

> Middleware is a "filter" or "layer" that **every SSR request** passes through to perform common tasks: authentication, redirects, logging, caching, and so on.

---

## Where middleware sits in the SSR chain

A typical SSR pipeline looks like this:

```javascript
(1) Client request
 ↓
(2) Middleware (checks, tokens, redirects)
 ↓
(3) SSR page rendering (React/Vue → HTML)
 ↓
(4) Response to the client
```

That is, middleware runs **before** (or sometimes **alongside**) the page render.

---

## Main tasks of middleware in SSR

### 1. Authentication and authorization

Middleware often checks whether the user has access to the page.

Example:

```javascript
export function middleware(req) {
  const token = req.cookies.get('token');
  if (!token) {
    return Response.redirect('/login');
  }
  return NextResponse.next();
}
```

> If the token is valid, the request continues (the page is rendered).
> If not, redirect to `/login`.

---

### 2. Redirects (redirect / rewrite)

Middleware can:

- redirect the user to another page,
- rewrite the request path without changing the URL in the address bar.

```javascript
if (req.nextUrl.pathname === '/old') {
  return NextResponse.redirect('/new');
}
```

---

### 3. Localization and geo-targeting

Middleware can determine:

- the language (`Accept-Language`),
- the country (by IP),
- the UI theme (cookie, header).

and redirect to the corresponding version of the page:

```javascript
if (req.geo.country === 'FR') {
  return NextResponse.rewrite('/fr' + req.nextUrl.pathname);
}
```

---

### 4. Handling sessions and cookies

Before SSR rendering, middleware can:

- read a `cookie` and decrypt the token,
- write new cookies (for example, a refresh token),
- pass the user's data into the SSR context.

```javascript
const session = verifyJWT(req.cookies.get('token'));
req.user = session.user;
```

---

### 5. Caching and edge optimization

Middleware can decide whether it's possible to **return cached HTML**
instead of running the SSR render every time.

Example:

```javascript
if (cache.has(req.url)) {
  return new Response(cache.get(req.url));
}
return NextResponse.next();
```

> It's used on an **edge server (Vercel Edge, Cloudflare Workers)**, closer to the user.
> It lets you serve the cache instantly without warming up SSR.

---

### 6. Logging, analytics, A/B testing

Middleware is convenient for:

- logging requests,
- adding a tracking ID,
- assigning users to A/B groups.

---

### 7. Preparing data for the SSR render

Sometimes middleware adds data to the request object (`req.context`, `req.user`, `req.featureFlags`)
that's later used during SSR rendering.

> For example, if the user is an admin, the SSR render draws more UI elements.

---

## An example chain in **Next.js**

```javascript
// middleware.ts
import { NextResponse } from 'next/server';

export function middleware(req) {
  const { pathname } = req.nextUrl;

// Authorization check
  if (pathname.startsWith('/dashboard')) {
    const token = req.cookies.get('session');
    if (!token) return NextResponse.redirect('/login');
  }

// Automatic localization
  if (pathname === '/') {
    const locale = req.headers.get('accept-language')?.split(',')[0];
    return NextResponse.rewrite(`/${locale}/home`);
  }

return NextResponse.next();
}
```

Here:

- middleware runs **before the SSR render**,
- it can change the path (`rewrite`),
- it can return a response right away (a redirect, 403, cached content),
- or simply let the request continue.

---

## Advantages of middleware in SSR

| Task | Why middleware is the best place for it |
|---|---|
| Checking authorization | No need to render the page for nothing |
| Redirects | Work before React loads |
| SEO redirects | Run on the server without JS |
| Caching | HTML can be served without SSR |
| Localization / A/B testing | Doesn't require a re-render |

---

## What middleware **does not** do

- It doesn't render React, the SSR engine does that (for example, `renderToString()`).
- It has no access to the DOM or React components.
- It doesn't run on the client, only on the server (or an edge node).

---

## Short summary

**Middleware in SSR**:

- runs **before HTML rendering**,
- handles **general request tasks** (authentication, redirects, caching, localization),
- can **influence which page gets rendered**, or even **stop the SSR render**,
- acts as a **thin controller** between the client and the rendering system.

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

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.