Що робить middleware в SSR?

ReactJunior~2 хв читання

Що таке middleware в контексті SSR

Middleware - це функція, яка виконується між:

моментом, коли сервер отримав запит, і моментом, коли він почав рендерити HTML і надсилати відповідь.

Можна сказати:

Middleware - "фільтр" або "прошарок", через який проходять усі SSR-запити, щоб виконати спільні задачі: авторизацію, редиректи, логування, кешування і т. д.

Де middleware знаходиться в SSR-ланцюжку

Типовий SSR-пайплайн виглядає так:

javascript

(1) Запит клієнта
 ↓
(2) Middleware (перевірки, токени, редиректи)
 ↓
(3) SSR-рендеринг сторінки (React/Vue → HTML)
 ↓
(4) Відповідь клієнту

Тобто middleware спрацьовує до (або іноді разом із) рендерингом сторінки.

Основні задачі middleware в SSR

1. Автентифікація і авторизація

Middleware часто перевіряє, чи має користувач доступ до сторінки.

Приклад:

javascript

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

Якщо токен валідний -> запит іде далі (рендер сторінки). Якщо ні -> редирект на /login.

2. Перенаправлення (redirect / rewrite)

Middleware може:

перенаправити користувача на іншу сторінку,
переписати шлях запиту без зміни URL в адресному рядку.

javascript

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

3. Локалізація і гео-таргетинг

Middleware може визначити:

мову (Accept-Language),
країну (за IP),
тему інтерфейсу (cookie, header).

і перенаправити на відповідну версію сторінки:

javascript

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

Перед SSR-рендерингом middleware може:

прочитати cookie і розшифрувати токен,
записати нові cookie (наприклад, refresh-токен),
передати дані користувача в SSR-контекст.

javascript

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

5. Кешування і edge-оптимізація

Middleware може визначити, чи можна повернути кешований HTML, щоб не запускати SSR-рендер щоразу.

Приклад:

javascript

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

Використовується на Edge-сервері (Vercel Edge, Cloudflare Workers) - ближче до користувача. Дозволяє віддавати кеш миттєво без прогрівання SSR.

6. Логування, аналітика, A/B-тести

Middleware зручно використовувати для:

логування запитів,
додавання tracking-ID,
розподілу користувачів по A/B-групах.

7. Підготовка даних для SSR-рендера

Іноді middleware додає в об'єкт запиту (req.context, req.user, req.featureFlags) дані, які потім використовуються при SSR-рендерингу.

Наприклад, якщо користувач - адмін, SSR-рендер відрисує більше елементів UI.

Приклад ланцюжка в Next.js

javascript

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

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

  // Перевірка авторизації
  if (pathname.startsWith('/dashboard')) {
    const token = req.cookies.get('session');
    if (!token) return NextResponse.redirect('/login');
  }

  // Автоматична локалізація
  if (pathname === '/') {
    const locale = req.headers.get('accept-language')?.split(',')[0];
    return NextResponse.rewrite(`/${locale}/home`);
  }

  return NextResponse.next();
}

Тут:

middleware спрацьовує до SSR-рендера,
може змінити шлях (rewrite),
може повернути відповідь одразу (редирект, 403, кеш-контент),
або просто пропустити запит далі.

Переваги middleware в SSR

Задача	Чому middleware - краще місце
Перевірка авторизації	Не потрібно рендерити сторінку даремно
Перенаправлення	Працюють до завантаження React
SEO-редиректи	Виконуються на сервері без JS
Кешування	Можна віддати HTML без SSR
Локалізація / A/B-тест	Не потребує ререндеру

Що middleware не робить

Не рендерить React - це робить SSR-двигун (наприклад, renderToString()).
Не має доступу до DOM або React-компонентів.
Не виконується на клієнті - тільки на сервері (або edge-вузлі).

Короткий підсумок

Middleware в SSR:

виконується до рендерингу HTML,
вирішує універсальні задачі запиту (автентифікація, редиректи, кеш, локалізація),
може впливати на те, яку сторінку рендерити, або навіть зупинити SSR-рендер,
працює як тонкий контролер між клієнтом і рендер-системою.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.