React 19 Server Actions z Zod: Mniej kodu szablonowego dla FormData
Używaj razem React 19 Server Actions i Zod, chociaż React Hook Form nadal jest lepszy, oraz dowiedz się, jak mały helper eliminuje powtarzające się operacje parsowania FormData.
React 19, Server Actions oraz useActionState zmieniają sposób tworzenia form. W przypadku wielu ekranów można pozostać przy standardowych formach HTML i obsługujących je serwerach, zamiast używać rozbudowanych bibliotek form na stronie klienta dla każdego przypadku.
Po kilku migracjach na tę architekturę te same dwie linijki pojawiały się niemal we wszystkich operacjach:
const data = Object.fromEntries(formData);
const result = schema.safeParse(data);if (!result.success) {
return {
errors: result.error.flatten().fieldErrors,
};
}
Ekrany logowania, procesy rejestracji, strony kontaktowe oraz edytory profili wszystkie wykorzystywały ten sam schemat: przekształcanie FormData w obiekt, uruchamianie narzędzia Zod, korygowanie błędów w polach, a następnie kontynuacja. To właśnie ta powtarzalność jest celem zod-form-action – małego narzędzia pomocniczego do łączenia Zod z React 19 Server Actions.
Co zmieniło się w React 19?
useActionState ułatwia śledzenie stanu wysyłania danych, bez konieczności ręcznego zarządzania kilkoma elementami stanu klienta.
Zamiast konfigurować w przeglądarce funkcję onSubmit, flagi ładowania oraz mechanizmy walidacji dla każdego formularza, formularz może bezpośrednio wysłać dane do operacji na serwerze.
Taki podejście zazwyczaj przynosi:
- Mniej JavaScriptu wysyłanego do klienta
- Lepszą wydajność w prostych przypadkach użycia
- Prostszy kod obsługujący operacje
- Możliwość stopniowego ulepszania funkcjonalności, gdy plik z kodem klienta jest wolny lub nieobecny
- Jasniejsze rozdzielenie zadań związanych z interfejsem użytkownika od tych na serwerze
Dla wielu aplikacji to naturalne rozwiązanie jest doskonałe.
Problem z walidacją formularzy
Operacje na serwerze otrzymują instancję typu FormData.
Zanim Zod będzie mógł przeprowadzić walidację, większość mechanizmów konwertuje tę instancję na zwykły obiekt.
const data = Object.fromEntries(formData);
const result = schema.safeParse(data);
Sama metoda jest w porządku.
Problem polega na tym, że każdy obsługiwacz przechodzi przez tę samą listę kontrolną:
- Zmiana FormData na zwykły obiekt
- Rozpoczęcie weryfikacji schematu Zod
- Kształtowanie komunikatów o błędach na poziomie pól
- Zwrócenie wartości typowanych w przypadku sukcesu
- Kontynuacja działania kodu domeny
Gdy ta lista kontrolna pojawia się na dziesiątkach form, powtarzalne zadania zastępują prawdziwą logikę.
Poznajmy zod-form-action
zod-form-action został stworzony po to, by zmniejszyć tę powtarzalną warstwę.
Zamiast ponownie implementować funkcje parsowania i weryfikacji w każdej akcji serwera, obsługiwacz może skupić się na zachowaniu domeny.
Pakiet zakłada już używaną architekturę:
- React 19
- useActionState
- Next.js Server Actions (lub inny host Server Actions)
- Zod
- TypeScript
Cel jest konkretny: utrzymanie spójności walidacji formularzy po stronie serwera oraz ułatwienie ich ponownego wykorzystania.
Dostępna jest żywa środowisko testowe w postaci tej demonstracji CodeSandbox.
Dlaczego po prostu nie użyć React Hook Form?
To pytanie pojawia się często, a odpowiedź nie jest odrzucająca.
React Hook Form wciąż pozostaje doskonałą biblioteką.
Nadal stanowi solidny wybór dla:
- dynamicznych formularzy
- walidacji po stronie klienta
- złożonych interaktywnych procesów
- tablic pól
- wizardów wieloetapowych
Nie każdy formularz wymaga tak rozbudowanej funkcjonalności.
Gdy projekt już korzysta z wbudowanego mechanizmu formularzy w React 19 wraz z Server Actions, prosty pomocnik Zod na serwerze może być lepszym rozwiązaniem niż pełny silnik formularzy po stronie klienta.
Te dwa narzędzia rozwiązują różne problemy, zamiast konkurować bezpośrednio.
Korzyści z używania zod-form-action
Zespoły często go przyjmują w celu:
- Zakończ ponowne wpisywanie danych po konwersji FormData
- Zgodnie ujednolicić zachowanie walidacji w różnych operacjach
- Otrzymywać jaśniejsze typy TypeScript po pomyślnym parsowaniu
- Raportować błędy pól w jednolitym formacie
- Dobrze współpracować z React 19 Server Actions
- Pozwolić każdej operacji skupić się na zasadach danej dziedziny
Zastosowania w praktyce
Dobrze pasuje do codziennych ekranów:
- Logowanie
- Kreacja konta
- Kontakt
- Subskrypcja na newslettera
- Modyfikacja profilu
- Ustawienia konta
- Pola na panelu sterowania
- Formularze CRUD dla administratorów
Takie procesy zazwyczaj wymagają prostych, powtarzanych sprawdzeń, a nie bardzo dynamicznych struktur pól.
Dlaczego wyodrębnić ten wzorzec
Prawie identyczne bloki walidacji pojawiały się w każdym przeniesionym kodzie.
Kopiowanie ich na zawsze jest nietrwałe; przeniesienie wspólnych kroków do pakietu wielokrotnego użytku zapewnia spójność projektów i umożliwia innym ulepszenie tego narzędzia pomocniczego.
Publikacja takiego pakietu zachęca do przekazywania opinii, zgłaszania błędów oraz dokonywania wkładów, zamiast utrzymywania tego rozwiązania tylko w jednym prywatnym repozytorium.
Bезpieczeństwo typów ma znaczenie
Moc Zod polega na sprawdzaniach w czasie wykonywania w połączeniu z solidnymi typami TypeScript.
Zamiast traktować każdą wartość z FormData jako nieznaną na zawsze, funkcja może pracować z danymi, które zostały już zweryfikowane i sformatowane.
To zazwyczaj oznacza:
- Lepsze uzupełnianie tekstu w ścieżce sukcesu
- Mniej niespodzianek w czasie wykonywania
- Czystsze funkcje obsługujące
- Latwiejsza długoterminowa konserwacja
Wydajność
Ponieważ weryfikacja odbywa się na serwerze, plik klienta może pozostać mniejszy.
Dla aplikacji już przystosowanych do Server Actions jest to zgodne z preferencją React 19, polegającą na przenoszeniu obliczeń na serwer tam, gdzie to pomocne.
Co dalej?
Ciągła praca nad zod-form-action koncentruje się na doświadczeniu programisty.
Wśród obszarów poddawanych analizie znajdują się:
- Lepsza inferencja w TypeScript
- Dodatkowe narzędzia walidacji
- Szerzej zakrojone integracje z frameworkami
- Jasniejsza dokumentacja
Komentarze osób korzystających z tego pakietu będą kierować procesem wydawania nowych wersji.
Często zadawane pytania
Czy mogę używać React Hook Form z React 19?
Tak. React Hook Form pozostaje solidną opcją, szczególnie gdy formularze wymagają zaawansowanej interaktywności po stronie klienta.
Czy React 19 zastępuje React Hook Form?
Nie. React 19 dodaje nowe API i wzorce; nie usuwa już istniejących bibliotek do tworzenia form. Wybór zależy od złożoności formy oraz od tego, gdzie ma odbywać się walidacja.
Dlaczego używać Zod do walidacji?
Zod sprawdza dane w czasie wykonywania i zapewnia, że typy z TypeScript są zgodne z tą walidacją, dzięki czemu nieprawidłowe dane są wykrywane wcześnie, a te poprawne pozostają z właściwymi typami.
Czy zod-form-action jest przeznaczony tylko dla Next.js?
Nie. Każda aplikacja React 19, która wykorzystuje Server Actions i Zod, może odnieść korzyści, w zależności od struktury architektury.
Ostateczne uwagi
React 19 zachęca zespoły do prostszego tworzenia form.
Rodzime formy HTML, useActionState, Server Actions oraz Zod razem mogą zapewnić solidną i typizowaną walidację, bez konieczności używania rozbudowanych narzędzi do form na stronie klienta.
Gdy ten sam blok analizy i walidacji FormData występuje w wielu operacjach, wyodrębnienie tego wzorca do użycia jako pomocnik ułatwia utrzymanie bazy kodu.
zod-form-action został stworzony z myślą o tym celu.
Zainstaluj go ze strony pakietu npm.
Literatura pokrewna
- Zastępowanie as-Casts analizą Zod w każdej grenicy danych Next.js — Dlaczego konwersja typów w TypeScript nie chroni przed zmianami API oraz jak jedna schemat Zod waliduje wyniki fetch, formy, obsługę tras i działania serwera w Next.js.