Що таке Server Actions?

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 + дані + логіка в одному місці», без зайвої інфраструктури.