Next.js теперь позволяет разработчикам вызывать функции, предназначенные только для сервера, напрямую из компонента, избавляя от необходимости создавать отдельные API-роуты для повседневных задач, таких как отправка форм. Используя новую функцию Server Actions, одна HTML-форма может запускать серверный код без промежуточного вызова fetch, что сокращает объем шаблонного кода и делает контракт между фронтендом и бэкендом более тесным.

Почему старый способ кажется громоздким

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

Server Actions сокращают этот разрыв

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

Определение экшена

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, чтобы интерфейс отобразил новый проект без полной перезагрузки страницы.

Подключение в UI

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

Когда пользователь нажимает кнопку отправки, браузер отправляет данные формы в серверную функцию createProject. Поскольку это использует стандартное поведение HTML-форм, отправка работает даже если JavaScript еще не загрузился, что улучшает воспринимаемую производительность на медленных соединениях.

Что это дает командам

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

Ограничения и предостережения

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

На что обратить внимание

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

Итог

Позволяя компоненту напрямую вызывать функцию, предназначенную только для сервера, Next.js Server Actions устраняют посредника, который долгое время загромождал проекты на React. Результатом становится более чистый код, более быстрые циклы запросов и более приятный опыт разработки — при условии, что текущие ограничения функции соответствуют потребностям проекта.