Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Що таке SSR у Next.js?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**SSR (Server-Side Rendering)** у **Next.js** - це режим, за якого **HTML сторінки генерується на сервері під час кожного запиту**, а не заздалегідь на білді. **Ключове:** SSR потрібен, коли дані змінюються часто, є персоналізація, використовується auth і важливі SEO та актуальність.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)Зображення**SSR (Server-Side Rendering)** у **Next.js** - це режим, за якого **HTML сторінки генерується на сервері під час кожного запиту**, а не заздалегідь на білді. ## Як працює SSR 1. Користувач відкриває сторінку 2. Запит іде на сервер 3. Сервер: - виконує код сторінки - запитує дані (DB / API) - **генерує HTML** 4. Готовий HTML надсилається користувачу 5. Браузер гідратує сторінку (React оживає) ``` request → server render → HTML → browser → hydrate ``` --- ## Як вмикається SSR в App Router SSR **вмикається автоматично**, якщо: - використовується динамічний `fetch` - є user-specific дані - вимкнено кешування ### Явно: ```ts export const dynamic = "force-dynamic"; ``` ### Через `fetch`: ```ts await fetch("https://api.example.com/data", { cache: "no-store", // ← SSR }); ``` --- ## Коли потрібен SSR Використовуй SSR, якщо: - дані **змінюються часто** - є **персоналізація** - використовується **auth** - важливі **SEO + актуальність** Приклади: - особистий кабінет - профіль користувача - адмінка - результати пошуку - задачі з правами доступу --- ## Плюси SSR - завжди свіжі дані - SEO без компромісів - персоналізація - не потрібен client fetch для першого екрана --- ## Мінуси SSR - повільніше, ніж SSG - навантаження на сервер - дорожче в інфраструктурі - вищий TTFB --- ## SSR vs SSG | | SSR | SSG | |---|---|---| | Коли рендер | при запиті | при білді | | Актуальність | Так | Ні | | Швидкість | Висока | Дуже висока | | Персоналізація | Так | Ні | | Сервер | потрібен | не потрібен | --- ## SSR чудово поєднується зі Streaming ```tsx <Suspense fallback={<Skeleton />}> <UserStats /> </Suspense> ``` - сторінка починає відображатися одразу - важкі блоки довантажуються пізніше - UX майже як у SSGДля рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.