React 19 Server Actions з Zod: менше коду для форм даних

React 19, Server Actions та useActionState змінюють підхід до створення форм. Для багатьох екранів можна продовжувати використовувати стандартні HTML-форми та обробники на сервері, замість того щоб для кожного випадку запускати велику бібліотеку клієнтських форм.

Після кількох міграцій на цю стек-технологію ті самі два рядки продовжували з’являтися майже в кожній дії:

const data = Object.fromEntries(formData);

const result = schema.safeParse(data);if (!result.success) {
  return {
    errors: result.error.flatten().fieldErrors,
  };
}

Екрани входу, процеси реєстрації, сторінки контактів та редагування профілів усі використовували однаковий підхід: перетворювати FormData на об’єкт, запускати Zod, формувати повідомлення про помилки у полях, а потім продовжувати роботу. Саме цю повторюваність має на меті zod-form-action — невеликий допоміжний інструмент для поєднання Zod з React 19 Server Actions.

Що змінилося в React 19?

useActionState дозволяє легше відстежувати стан надсилання даних, уникаючи необхідності вручну керувати кількома елементами стану клієнта.

Замість того, щоб для кожної форми налаштовувати в браузері функцію onSubmit, прапорці завантаження та механізми перевірки, форма може безпосередньо надсилати дані на обробку серверу.

Такий підхід зазвичай призводить до:

• Меншої кількості JavaScript-коду, який надсилається клієнту
• Кращої продуктивності для простих процесів
• Простішого коду обробки даних
• Можливості поступового покращення функціоналу у разі повільного або відсутнього клієнтського пакету
• Чіткішого розділення завдань користувацького інтерфейсу та серверної частини

Для багатьох додатків цей природний підхід є ідеальним рішенням.

Проблема з перевіркою форм

Обробники даних на сервері отримують екземпляр FormData.

Перш ніж Zod зможе перевірити дані, більшість обробників перетворюють цей екземпляр на звичайний об’єкт.

const data = Object.fromEntries(formData);

const result = schema.safeParse(data);

Сам підхід є гарним.

Проблема полягає у тому, що кожен обробник виконує однаковий перелік кроків:

• Перетворює FormData на звичайний об’єкт
• Запускає схему Zod
• Формує повідомлення про помилки на рівні полів
• Повертає типовані значення у разі успіху
• Переходить до коду домену

Коли такий перелік кроків з’являється на десятках форм, рутинна робота витісняє справжню логіку.

Представляємо zod-form-action

zod-form-action створений для скорочення цього повторюваного етапу.

Замість того, щоб заново реалізовувати функції обробки та перевірки в кожній дії сервера, обробник може зосередитися на поведінці домену.

Цей пакет передбачає вже наявну стек технологій:

• React 19
• useActionState
• Next.js Server Actions (або інший хост Server Actions)
• Zod
• TypeScript

Мета є конкретною: зберегти послідовність перевірки форм на стороні сервера та забезпечити її легке повторне використання.

Доступна жива сандбокс-середовище у вигляді цього демо CodeSandbox.

Чому просто не використати React Hook Form?

Це питання часто ставиться, і відповідь не є відмовною.

React Hook Form залишається чудовою бібліотекою.

Вона все ще є гарним вибором для:

• динамічних форм
• перевірки на стороні клієнта
• складних інтерактивних процесів
• масивів полів
• багатокрокових майстер-класів

Не кожній формі потрібна така розгорнутість.

Коли проект вже використовує вбудований механізм форм React 19 з Server Actions, простий помічник Zod на сервері може бути кращим рішенням, ніж повний двигун форм на клієнті.

Ці два інструменти вирішують різні проблеми, а не конкурують безпосередньо.

Переваги використання zod-form-action

Команди часто впроваджують його для:

• Припиніть повторне введення даних під час конвертації FormData
• Уніфікуйте поведінку перевірки у всіх діях
• Отримуйте більш зрозумілі типи TypeScript після успішного аналізу
• Звітуйте про помилки полів у стандартному форматі
• Гармонійно інтегруйтеся з React 19 Server Actions
• Змусьте кожну дію зосереджуватися на правилах своєї сфери

Практичні сценарії використання

Це чудово підходить для щоденних інтерфейсів:

• Увійти
• Створити обліковий запис
• Контакти
• Підписка на розсилку
• Редагування профілю
• Налаштування облікового запису
• Заповнення інформації на панелі керування
• Форми CRUD для адміністратора

У таких процесах зазвичай потрібні прості, повторювані перевірки, а не складні динамічні структури полів.

Чому варто виділити цю схему

Майже ідентичні блоки перевірки з’являлися у кожному мігрованому кодбазі.

Постійне копіювання цих елементів є нестабільним; перенесення спільних кроків у повторно використовуваний пакет допомагає підтримувати проекти у відповідності та дозволяє іншим покращувати цей інструмент.

Опублікування такого пакета спонукає до надсилання відгуків, звітів про помилки та корисних внесків, замість того щоб утримувати цю структуру лише в приватному репозиторії.

Безпека типів має значення

Сила Zod полягає у перевірках під час виконання разом із міцними типами TypeScript.

Замість того щоб постійно вважати кожне значення FormData невідомим, цей інструмент може працювати з даними, які вже були перевірені та присвоєні типи.

Це зазвичай означає:

• Краще автодоповнення під час успішного виконання
• Менше несподіванок під час виконання
• Чистіші обробники даних
• Простіше довгострокове обслуговування

Продуктивність

Оскільки перевірка відбувається на сервері, розмір клієнтського пакету може залишатися меншим.

Для додатків, які вже використовують Server Actions, це відповідає перевагам React 19 щодо переміщення обробки даних на сервер там, де це корисно.

Що буде далі?

Постійна робота над zod-form-action спрямована на покращення досвіду розробника.

Серед напрямків досліджень:

• Покращена інференція в TypeScript
• Додаткові інструменти для верифікації
• Більше прикладів
• Ширша інтеграція з фреймворками
• Більш зрозуміла документація

Відгуки користувачів цього пакета будуть впливати на подальші версії.

Часто ставлені запитання

Чи можу я використовувати React Hook Form з React 19?

Так. React Hook Form залишається надійним варіантом, особливо коли формам потрібна розширена інтерактивність на клієнтській стороні.

Чи замінює React 19 React Hook Form?

Ні. React 19 додає нові API та патерни; він не скасовує існуючі бібліотеки форм. Вибирайте залежно від складності форми та місця, де має відбуватися перевірка.

Чому використовувати Zod для перевірки?

Zod здійснює перевірку під час виконання та підтримує типи TypeScript у відповідності з цією перевіркою, тож недійсні дані виявляються рано, а дійсні залишаються з правильними типами.

Чи призначений zod-form-action лише для Next.js?

Ні. Будь-який додаток на React 19, який використовує Server Actions та Zod, може отримати користь від нього, залежно від структури архітектури.

Заключні міркування

React 19 спонукає команди до створення простіших форм.

Нативні HTML-форми, useActionState, Server Actions та Zod разом можуть забезпечити надійну та типовану перевірку без необхідності постійного використання великого набору інструментів для клієнтських форм.

Коли один і той самий блок обробки та перевірки FormData використовується у багатьох діях, вилучення цього шаблону у вигляді повторно використовуваного допоміжного інструменту полегшує підтримку кодбази.

zod-form-action був створений саме з цією метою.

Встановіть його з сторінки пакета npm.