Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Які завдання краще вирішувати серверними компонентами?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**Серверні компоненти** у Next.js найкраще використовувати для завдань, де **не потрібна інтерактивність**, але важливі **дані, продуктивність і безпека**. **Ключове:** усе, що **не вимагає реакції на дії користувача**, краще робити серверним компонентом.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)ЗображенняСерверні компоненти в Next.js найкраще використовувати для завдань, де **не потрібна інтерактивність**, але важливі **дані, продуктивність і безпека**. Нижче - розбір по пунктах, саме в тому вигляді, як цього чекають на співбесідах. --- ## Коротка відповідь (для інтерв'ю) **Серверні компоненти підходять для:** - отримання і підготовки даних - рендерингу статичного і напівстатичного контенту - роботи з БД і секретами - побудови основної структури сторінки Усе, що **не вимагає реакції на дії користувача**, краще робити серверним компонентом. --- ## 1. Отримання даних (fetch, БД, backend) ### Чому сервер: - немає CORS - немає витоку секретів - швидше (запити йдуть із дата-центру) ```tsx // Server Component export default async function ProductsPage() { const products = await getProductsFromDB() return <ProductsList products={products} /> } ``` Типове питання: **«Чому не робити fetch на клієнті?»** Відповідь: тому що сервер швидший, безпечніший і не збільшує JS-бандл. --- ## 2. Робота з базою даних Серверні компоненти **можуть напряму звертатися до БД**: - Prisma - SQL - MongoDB - внутрішні сервіси ```ts const users = await prisma.user.findMany() ``` - безпечно - просто - без API-шарів --- ## 3. Робота із секретами і приватними даними Серверні компоненти підходять для: - API-ключів - токенів - приватних endpoint'ів - внутрішніх сервісів ```ts process.env.API_SECRET ``` Такий код **ніколи не потрапить у браузер**. --- ## 4. Рендеринг статичного і SEO-контенту Серверні компоненти ідеальні для: - лендингів - блогів - сторінок каталогу - SEO-сторінок Причини: - готовий HTML - швидке відображення - хороший SEO - менше JS --- ## 5. Компонування сторінки (layout) Серверні компоненти зручно використовувати для: - layout'ів - хедерів - футерів - навігації - сторінок (`page.tsx`) ```tsx export default function Layout({ children }) { return ( <> <Header /> {children} <Footer /> </> ) } ``` Якщо хедер не інтерактивний - він має бути серверним. --- ## 6. Попередня обробка і агрегація даних Серверні компоненти хороші для: - об'єднання даних із кількох джерел - фільтрації - сортування - підрахунків ```ts const data = await Promise.all([ getUsers(), getOrders() ]) ``` Клієнту приходить **уже готовий результат**, а не логіка. --- ## 7. Мінімізація клієнтського JavaScript Кожен клієнтський компонент: - збільшує бандл - сповільнює завантаження - вимагає гідрації Тому: > **якщо компонент можна зробити серверним - його потрібно робити серверним** --- ## Типові завдання - коротко списком - завантаження даних - сторінки і layout'и - SEO-контент - робота з БД - робота із секретами - підготовка даних - рендеринг списків без інтерактивності --- ## Коли НЕ варто використовувати серверні компоненти - кнопки і кліки - форми з live-валідацією - модалки - dropdown / tabs - анімації - стан UI Тут потрібні клієнтські компоненти.Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.