Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Що таке Server Actions у Next.js?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**Server Actions у Next.js** - це спосіб викликати серверний код напряму з компонентів або форм, без ручного створення API-роутів і без окремого fetch-запиту. **Ключове:** функція з директивою `'use server'` виконується тільки на сервері, не потрапляє в client bundle і може безпечно працювати з БД, токенами та ключами API.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)Зображення**Server Actions у Next.js** - це спосіб викликати серверний код **напряму з компонентів або форм**, без ручного створення API-роутів і без окремого fetch-запиту. Простіше кажучи: ти пишеш функцію, позначаєш її як серверну, і Next.js сам піклується про те, щоб вона виконалася **на сервері**, навіть якщо виклик стався з інтерфейсу. --- ### Навіщо вони потрібні Раніше типовий сценарій виглядав так: 1. Форма або кнопка в браузері 2. `fetch` → API Route (`/api/...`) 3. Сервер обробляє запит 4. Повертає відповідь Server Actions прибирають цей «посередницький» шар. Тепер схема простіша: 1. Користувач натиснув кнопку або відправив форму 2. Викликається серверна функція 3. Сервер робить потрібну роботу (БД, файли, секрети) Без окремого API-роуту і без ручного HTTP-запиту. --- ### Що саме є Server Action Це **звичайна async-функція**, але з директивою: ```ts 'use server' ``` Цей рядок каже Next.js: > «Ця функція повинна виконуватися тільки на сервері». Приклад ідеї (спрощено, без деталей): ```ts 'use server' export async function createUser(formData) { // робота з базою даних } ``` Таку функцію можна: - передати напряму в `<form action={...}>` - викликати з client-компонента --- ### Де виконується код Це ключовий момент: - Server Action **ніколи не виконується в браузері** - Код **не потрапляє в client bundle** - Можна безпечно використовувати: - токени - ключі API - доступ до БД - файлову систему Користувач бачить тільки результат, але не реалізацію. --- ### Основні переваги 1. **Менше коду** - Не потрібні API-роути для простих операцій 2. **Безпека** - Секрети залишаються на сервері - Не можна викликати напряму по URL 3. **Проста робота з формами** - Форма може викликати серверну функцію без JavaScript 4. **Глибока інтеграція з рендерингом** - Можна одразу оновлювати дані - Працює з кешуванням і revalidation --- ### Коли Server Actions особливо зручні - Відправка форм (створення, оновлення, видалення даних) - Прості CRUD-операції - Дії, які логічно належать до UI - Коли не потрібен публічний API --- ### Коротко в одному абзаці Server Actions у Next.js - це серверні функції, які можна викликати напряму з компонентів і форм, без API-роутів і fetch-запитів. Вони виконуються тільки на сервері, безпечні, зменшують кількість коду і спрощують роботу з даними.Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.