Form Actions: Menggantikan Rute API untuk Mutasi

Dalam aplikasi Next.js tradisional, pengiriman formulir memerlukan komponen klien dengan pengendali onSubmit yang memanggil fetch() untuk mengirim data melalui POST ke rute API. Pola ini dapat digunakan, tetapi Anda harus menulis dan memelihara logika pengambilan data di sisi klien serta pengendali rute di sisi server secara terpisah.

Dengan Tindakan Server, Anda mengganti panggilan pengambilan data dan rute API dengan satu fungsi. Elemen formulir menerima Tindakan Server sebagai properti action: <form action={serverAction}>. React mencegat pengiriman tersebut dan secara otomatis memanggil tindakan dengan data formulir.

Tindakan Server secara otomatis menerima objek FormData sebagai argumennya ketika dipicu oleh formulir. Anda mengakses bidang individual menggunakan formData.get('email'), yang mengembalikan nilainya sebagai string. Semua metode FormData standar tersedia, termasuk getAll() untuk bidang dengan pilihan jamak.

Tindakan Server dapat mengembalikan nilai yang dapat diserialisasi dan digunakan oleh klien. Mengembalikan objek kesalahan seperti { error: 'Email already exists' } atau penanda keberhasilan seperti { success: true } memungkinkan klien memperbarui antarmuka pengguna tanpa memuat ulang halaman secara penuh.

Karena tindakan formulir adalah Tindakan Server, komponen halaman yang menampung formulir tidak perlu menjadi Komponen Klien. Server merender formulir sebagai HTML statis, dan hanya bagian interaktif—seperti tampilan kesalahan—yang memerlukan JavaScript di sisi klien. Hal ini secara signifikan mengurangi ukuran bundel klien.

Formulir dengan action={serverAction} tetap berfungsi tanpa JavaScript yang diaktifkan. Peramban melakukan POST formulir HTML standar, server menjalankan tindakan, lalu server mengembalikan halaman yang telah diperbarui. Peningkatan progresif yang sesungguhnya ini membuat formulir tetap berfungsi dengan baik di semua lingkungan.

Setelah Tindakan Server memutasi data, data halaman yang disimpan dalam tembolok harus diperbarui. Memanggil revalidatePath('/dashboard') di dalam tindakan akan membatalkan tembolok Next.js untuk jalur tersebut, sehingga permintaan berikutnya mengambil data terbaru. Inilah cara standar untuk menjaga halaman yang dirender server tetap mutakhir setelah mutasi.

revalidateTag('user-data') menyediakan invalidasi tembolok yang lebih terperinci daripada revalidatePath. Anda memberi tag pada panggilan pengambilan data dengan next: { tags: ['user-data'] }, lalu membatalkan semua data bertag tersebut sekaligus dari dalam Tindakan Server, terlepas dari jalur mana yang menampilkan data itu.

Tindakan Server dapat mengalihkan pengguna ke halaman baru setelah mutasi berhasil dengan memanggil redirect('/success') dari modul next/navigation. Pengalihan ini ditangani di sisi server, sehingga peramban menerima respons navigasi yang semestinya, bukan pengalihan di sisi klien.

Tindakan Server tidak terbatas pada pengiriman formulir. Untuk klik tombol dan pemicu non-formulir lainnya, bungkus pemanggilan tindakan dalam startTransition(() => action(arg)). Ini menandai navigasi sebagai transisi, sehingga React dapat mempertahankan antarmuka pengguna saat ini tetap terlihat selama tindakan dijalankan di server.

Tindakan Server adalah tempat yang tepat untuk validasi di sisi server. Validasi bidang FormData, kembalikan kesalahan validasi jika tidak lolos, dan lanjutkan ke mutasi hanya jika semua bidang valid. Pustaka seperti Zod terintegrasi dengan baik di sini: uraikan FormData menjadi skema bertipe dan kembalikan peta kesalahan jika gagal.

Apa yang diterima Tindakan Server sebagai argumennya ketika dipicu oleh pengiriman formulir?

Tindakan Server menggantikan pola pengambilan data + rute API untuk mutasi formulir. Properti formulir action dapat langsung menerima Tindakan Server, yang menerima objek FormData. Tindakan mengembalikan hasil yang dapat diserialisasi untuk memperbarui antarmuka pengguna klien, mendukung revalidatePath dan revalidateTag untuk invalidasi tembolok, serta tetap berfungsi secara progresif tanpa JavaScript.