Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Що таке SSR і навіщо він потрібен?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**SSR (Server-Side Rendering)** - це підхід, при якому HTML-сторінка формується на сервері, а в браузер приходить вже готова розмітка, а не порожній `<div id="root">`. **Ключове:** SSR потрібен для покращення SEO, пришвидшення першої відмальовки та підвищення якості користувацького досвіду.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)Зображення**SSR (Server-Side Rendering)** - це підхід, при якому HTML-сторінка **формується на сервері**, а в браузер приходить вже готова розмітка, а не порожній `<div id="root">`. Простіше: > CSR - спочатку JS, потім контент > SSR - спочатку контент, потім JS --- ## Як це працює На прикладі **Next.js**: 1. Користувач запитує сторінку 2. Сервер виконує React-код 3. Генерує **готовий HTML** 4. Браузер одразу відображає сторінку 5. JS «гідратує» її -> з'являється інтерактивність --- ## Як працює без SSR (CSR) ```txt HTML → порожньо ↓ завантажується JS ↓ виконується React ↓ з'являється контент ``` повільний First Paint погано для SEO порожній екран на слабких пристроях --- ## Як працює з SSR ```txt HTML → вже є контент ↓ сторінка видна одразу ↓ підключається JS ↓ інтерактивність ``` швидко SEO-friendly кращий UX --- ## Навіщо потрібен SSR ### 1. SEO Пошукові системи отримують: - заголовки - текст - мета-теги А не порожню сторінку. --- ### 2. Швидкий First Contentful Paint Користувач **одразу** бачить контент: - сторінки відчуваються швидшими - вища конверсія - менше відмов --- ### 3. Передбачуваний UX - працює навіть при повільному інтернеті - менше «білих екранів» - краще для мобільних пристроїв --- ### 4. Підходить для динамічних даних SSR ідеально підходить, коли: - дані залежать від запиту - потрібен auth / cookies - контент персоналізований --- ## Коли SSR використовувати НЕ варто адмінки суто інтерактивні застосунки сторінки без SEO-цінності Там простіше і дешевше CSR. --- ## SSR в Next.js У Next.js SSR вмикається **типово** для сторінок із серверними даними: - Server Components - `fetch()` на сервері - доступ до БД і cookies - рендер на кожен запит --- ## Коротка відповідь для співбесіди > **SSR - це серверний рендеринг React-застосунку, при якому HTML формується на сервері. Він потрібен для покращення SEO, пришвидшення першої відмальовки та підвищення якості користувацького досвіду.**Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.