Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Що таке Server Actions?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**Server Actions** - це механізм у Next.js, який дозволяє викликати серверний код напряму з компонентів, без створення API Routes і ручних HTTP-запитів. **Ключове:** Server Actions призначені для UI-дій, ініційованих користувачем, і не підходять як публічний API чи backend для зовнішніх клієнтів.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)Зображення**Server Actions** - це механізм у Next.js, який дозволяє **викликати серверний код напряму з компонентів**, без створення API Routes і ручних HTTP-запитів. Простіше кажучи: ти викликаєш функцію - вона виконується **на сервері** - а результат автоматично повертається у застосунок. Без `fetch('/api/...')`, без REST, без зайвого шару. --- ## Головна ідея Server Actions дозволяють писати код у стилі: > «Коли користувач зробив дію - > виконай ось цю серверну функцію» І Next.js сам: - надішле дані на сервер - виконає код - поверне результат - оновить інтерфейс Для розробника це виглядає майже як **звичайний виклик функції**. --- ## Де вони працюють Server Actions доступні в **App Router** у Next.js. Вони: - виконуються **тільки на сервері** - не потрапляють в клієнтський бандл - можуть використовувати БД, секрети, файлову систему --- ## Які завдання вирішують Server Actions ### 1. Обробка користувацьких дій Типові сценарії: - відправка форми - збереження даних - оновлення запису - видалення елемента - логін / логаут Раніше для цього: - створювали API Route - робили `fetch` з клієнта - обробляли відповідь Тепер: - викликається Server Action напряму --- ### 2. Спрощення архітектури Без Server Actions потік виглядав так: **Client → fetch → API Route → логіка → відповідь** Із Server Actions: **Client → Server Action → логіка** Менше файлів, менше зв'язків, менше «стрибків». --- ### 3. Безпека типово Server Actions: - не розкривають серверний код - не потребують публічних ендпоінтів - захищені від прямого виклику ззовні Це знижує ризик: - неправильного використання API - витоку логіки - випадкового доступу --- ## Як вони використовуються концептуально Є два основні варіанти: ### 1) Через форми Форма відправляється - Server Action обробляє дані. Дуже зручно для: - CRUD-операцій - валідації - збереження даних --- ### 2) Через події (кліки, сабміти) Кнопка → виклик серверної функції → оновлення даних. Часто використовується разом з: - оптимістичними оновленнями - revalidation кешу - оновленням сторінки чи її частини --- ## Server Actions і кешування Server Actions тісно пов'язані з кешем: - після мутації даних можна: - інвалідувати `fetch`-кеш - пересобрати сторінку - оновити конкретний маршрут Це робить потік даних **передбачуваним**: - дія → зміна даних → оновлення UI Без ручного керування станом. --- ## Обмеження Server Actions Важливо розуміти, чого вони **не роблять**: - не підходять для публічного API - не викликаються напряму із зовнішніх клієнтів - не замінюють backend для мобільних застосунків Вони призначені саме для: - UI-дій - логіки «поруч з інтерфейсом» --- ## Коли Server Actions - найкращий вибір Використовуй Server Actions, якщо: - дія ініціюється користувачем - потрібен серверний код - результат впливає на UI - не потрібен публічний API Якщо ж потрібен: - зовнішній доступ - інтеграція з іншими сервісами - універсальний endpoint - тоді краще API Routes. --- ## Коротко по суті Server Actions - це: - серверні функції - викликані прямо з компонентів - без API Routes і `fetch` - безпечні й зручні - тісно пов'язані з кешем і рендерингом Вони роблять Next.js ближчим до моделі **«UI + дані + логіка в одному місці»**, без зайвої інфраструктури.Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.