Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Що таке гібридний рендеринг у Next.js?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**Гібридний рендеринг у Next.js** - це підхід, при якому **одна й та сама сторінка поєднує кілька стратегій рендерингу**: серверні компоненти, клієнтські компоненти, статичну генерацію та динамічний рендеринг. **Ключове:** Next.js не змушує обирати щось одне - SSR, SPA чи SSG можна комбінувати в межах однієї сторінки, там, де це доречно.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)Зображення**Гібридний рендеринг у Next.js** - це підхід, при якому **одна й та сама сторінка поєднує кілька стратегій рендерингу**: серверні компоненти, клієнтські компоненти, статичну генерацію та динамічний рендеринг. Простіше кажучи: Next.js дозволяє **гнучко обирати, де і як рендерити кожну частину застосунку**, а не використовувати один спосіб для всього. --- ## Коротке визначення (для співбесіди) **Гібридний рендеринг** - це можливість Next.js: - рендерити частину сторінки на сервері - частину - у браузері - частину - заздалегідь (static) - частину - за запитом (dynamic) і все це **в межах однієї сторінки**. --- ## Як це виглядає концептуально    Одна сторінка може складатися з: - серверного layout'а - серверного компонента з даними - клієнтського компонента для інтерактивності --- ## Простий приклад гібридної сторінки ```tsx // Server Component (page.tsx) import Counter from './Counter' export default async function Page() { const products = await getProducts() return ( <> <h1>Products</h1> <ProductList products={products} /> <Counter /> </> ) } ``` ```tsx // Client Component 'use client' import { useState } from 'react' export default function Counter() { const [count, setCount] = useState(0) return <button onClick={() => setCount(count + 1)}>{count}</button> } ``` - дані та список - **сервер** - лічильник - **клієнт** - користувач отримує готовий HTML + мінімальний JS --- ## Які підходи входять у гібридний рендеринг ### 1. Серверні та клієнтські компоненти - Server Components - дані та структура - Client Components - інтерактивність --- ### 2. Статична генерація (SSG) Сторінка генерується **на етапі білда**. Підходить для: - блогів - лендингів - документації ```ts export const revalidate = 60 ``` --- ### 3. Динамічний рендеринг (SSR) HTML створюється **на кожен запит**. Підходить для: - персоналізованих сторінок - авторизованих користувачів --- ### 4. Інкрементальна регенерація (ISR) Комбінація SSG + SSR: - HTML кешується - періодично оновлюється --- ## Чому це називається «гібридним» Тому що Next.js **не змушує обирати щось одне**: - не «все SSR» - не «все SPA» - не «все SSG» Можна комбінувати все одразу - **там, де це доречно**. --- ## Навіщо потрібен гібридний рендеринг ### Продуктивність - менше JS - швидкий перший рендер ### SEO - HTML доступний одразу ### UX - інтерактивність там, де потрібно ### Масштабованість - простіше оптимізувати великі застосункиДля рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.