Server Actions menawarkan DX yang menarik karena submit form bisa langsung mengeksekusi logika server tanpa ceremony API route yang panjang. Namun, kesederhanaan ini sering membuat orang meremehkan desain flow-nya.
Kalau error state, pending state, dan success state tidak dipikirkan dari awal, form tetap akan terasa kikuk walaupun secara teknis sudah modern.
Mulai dari peta state form
Saya memulai dari peta state sederhana: idle, pending, success, dan error. Empat state ini biasanya cukup untuk menentukan copy tombol, helper text, dan area feedback tanpa membuat komponen terlalu rumit.
Dengan state map yang jelas, keputusan UI seperti disable button atau menampilkan ringkasan error bisa dibuat lebih konsisten.
State minimum yang paling berguna
- Idle: form siap diisi.
- Pending: tombol submit dan feedback berubah.
- Success: ada tindak lanjut yang jelas.
- Error: user tahu apa yang harus dibenahi.
Pastikan feedback validasi mudah dipetakan
Validasi server tetap penting walaupun sudah ada validasi client. Saya lebih suka hasil validasi dikembalikan dalam bentuk struktur yang mudah dipetakan ke field, sehingga error message tidak berserakan di banyak tempat.
Server Action menjadi nyaman ketika komponen form tidak perlu menebak-nebak format responsnya.
Selesaikan flow sampai ke state akhir
Setelah submit berhasil, selalu tentukan tindak lanjutnya: redirect ke halaman detail, tampilkan success message, atau reset form. Tanpa keputusan ini, user sering ragu apakah data benar-benar tersimpan.
Kesederhanaan flow biasanya lahir dari keputusan yang tegas, bukan dari jumlah kode yang sedikit.
<form action={createLead}>
<input name="email" />
<button type="submit">Send</button>
</form>