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

Why the old way feels heavy

У типовому додатку React або Next.js проста форма «створити проєкт» запускає ланцюжок кроків: файл API-маршруту, fetch-запит із браузера, обробка станів завантаження та помилок, заголовки CORS і, нарешті, оновлення на стороні клієнта для відображення нових даних. Кожен крок додає файли, рядки коду та потенційні точки відмови. Команди витрачають час на з'єднання цих частин, навіть якщо єдина мета — записати дані в базу даних.

Server Actions close the gap

Server Actions — це асинхронні функції, які гарантовано виконуються лише на сервері. Додавання директиви "use server" на початку файлу вказує компілятору не включати цей код у бандл браузера, щоб він міг безпечно отримувати доступ до баз даних, секретів або будь-яких інших ресурсів, доступних лише на сервері. Оскільки функція живе на сервері, компонент може викликати її безпосередньо через атрибут action нативному елементу <form>.

Defining an action

export async function createProject(formData: FormData) {
  const title = formData.get('title') as string;

  if (!title) throw new Error('Title is required');

  await db.project.create({
    data: { title }
  });

  revalidatePath('/dashboard');
}

Функція отримує об'єкт FormData, валідує дані, записує їх у базу даних, а потім просить Next.js оновити сторінку /dashboard, щоб інтерфейс відобразив новий проєкт без повного перезавантаження сторінки.

Hooking it up in the UI

export default function NewProjectForm() {
  return (
    <form action={createProject}>
      <input type="text" name="title" required />
      <SubmitButton />
    </form>
  );
}

Коли користувач натискає кнопку відправки, браузер надсилає дані форми на серверну функцію createProject. Оскільки це використовує стандартну поведінку HTML-форм, відправка працює навіть якщо JavaScript ще не завантажився, що покращує сприйняття продуктивності на повільних з'єднаннях.

What teams gain

  • Менше файлів – немає окремих файлів pages/api або app/api для кожного ендпоінта.
  • Менше зв'язків – немає ручних викликів fetch, немає явного оброблення CORS.
  • Вбудована типізація – сигнатура функції є спільною для сервера та клієнта, тому TypeScript може виявити невідповідності на ранніх етапах.
  • Перевага в продуктивності – запит іде безпосередньо до серверної функції, оминаючи зайвий мережевий перехід, який спричиняв би клієнтський fetch.

Limits and cautions

Server Actions — це все ще нова функція. Вони можуть бути лише асинхронними функціями, позначеними "use server", і вони не можуть повертати довільні JavaScript-об'єкти клієнту; вони мають завершуватися редиректом, ревалідацією або звичайною відповіддю. Відлагодження може відчуватися інакше, оскільки стек викликів перескакує з браузера на середовище виконання сервера, що може здивувати розробників, звиклих до класичних логів API-маршрутів. Також складні робочі процеси, що залучають кілька мікросервісів або потребують деталізованих HTTP-статусів, все ще можуть вимагати традиційного API-ендпоінта.

What to watch

Next.js, ймовірно, розширить API Server Actions у наступних релізах, додавши підтримку більшої кількості типів відповідей та кращу інтеграцію з інструментами. Раннім користувачам варто стежити за журналом змін (changelog) фреймворка та відгуками спільноти, щоб оцінити стабільність перед перенесенням критично важливих функцій на цей шлях. Моніторинг розміру бандла та метрик серверного рендерингу також може показати, чи перетворюється зменшення клієнтського коду на вимірюване скорочення затримок для ваших специфічних моделей трафіку.

Bottom line

Дозволяючи компоненту викликати функцію, доступну лише на сервері, безпосередньо, Next.js Server Actions усувають посередника, який тривалий час захаращував проєкти React. Результатом є чистіший код, швидші запити та зручніший досвід розробки — за умови, що поточні обмеження функції відповідають потребам проєкту.