Skip to main content

Що таке Server Actions у Next.js?

Next.jsMiddle~2 хв читання
Запропонувати правку

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-роути для простих операцій
  1. Безпека
  • Секрети залишаються на сервері
  • Не можна викликати напряму по URL
  1. Проста робота з формами
  • Форма може викликати серверну функцію без JavaScript
  1. Глибока інтеграція з рендерингом
  • Можна одразу оновлювати дані
  • Працює з кешуванням і revalidation

Коли Server Actions особливо зручні

  • Відправка форм (створення, оновлення, видалення даних)
  • Прості CRUD-операції
  • Дії, які логічно належать до UI
  • Коли не потрібен публічний API

Коротко в одному абзаці

Server Actions у Next.js - це серверні функції, які можна викликати напряму з компонентів і форм, без API-роутів і fetch-запитів. Вони виконуються тільки на сервері, безпечні, зменшують кількість коду і спрощують роботу з даними.

Коротка відповідь

Для співбесіди
Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Запропонувати правку