Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Що робить middleware в SSR?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**Middleware** - це функція, яка виконується між моментом, коли сервер отримав запит, і моментом, коли він почав рендерити HTML і надсилати відповідь. Це "фільтр" або "прошарок", через який проходять усі SSR-запити для виконання спільних задач: авторизації, редиректів, логування, кешування тощо. **Ключове:** middleware виконується до рендерингу HTML і не рендерить React сам - за це відповідає SSR-двигун (`renderToString()`).Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)Зображення## Що таке 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); } ``` --- ### 4. Обробка сесій і cookie Перед 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-рендер**, - працює як **тонкий контролер** між клієнтом і рендер-системою.Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.