Peningkatan Bertahap dengan Server Actions

Peningkatan progresif adalah strategi pengembangan web yang dimulai dengan dasar HTML yang berfungsi, lalu menambahkan kemampuan JavaScript di atasnya. Fungsionalitas inti berfungsi bagi semua pengguna, termasuk pengguna yang menonaktifkan JavaScript, memiliki koneksi lambat, atau menggunakan teknologi asistif, sementara pengguna yang mengaktifkan JavaScript mendapatkan pengalaman yang lebih baik.

Formulir dengan action={serverAction} berfungsi sebagai POST HTML halaman penuh bahkan tanpa JavaScript. Peramban mengirimkan formulir, server menjalankan tindakan tersebut, lalu server mengembalikan halaman HTML yang telah diperbarui. Mekanisme inilah yang telah mendukung formulir web sejak 1995 — Tindakan Server React dirancang agar kompatibel dengannya.

Ketika JavaScript tidak tersedia, validasi harus dilakukan di server. Tindakan Server memvalidasi data formulir, dan jika validasi gagal, tindakan tersebut mengembalikan status kesalahan. Server merender ulang halaman dengan pesan kesalahan yang disisipkan ke dalam HTML. Pengguna dapat melihat kesalahan tersebut tanpa JavaScript sisi klien apa pun yang berjalan.

Ketika React menghidrasi halaman, React mencegat pengiriman formulir dan menanganinya sebagai panggilan Tindakan Server asinkron, bukan POST halaman penuh. Pengguna mendapatkan pembaruan langsung tanpa memuat ulang halaman, status menunggu yang terlihat, serta antarmuka pengguna optimistis — semuanya tanpa mengubah tindakan atau struktur formulir yang mendasarinya.

Server merender formulir dengan status awal yang disisipkan ke dalam HTML. Ketika React melakukan hidrasi, React mengambil status awal tersebut tanpa memicu kedipan atau ketidakcocokan apa pun. Hook useActionState dirancang untuk menyelaraskan status awal yang dirender server dengan hidrasi klien secara mulus.

Transisi React memungkinkan antarmuka pengguna tetap interaktif selama panggilan Tindakan Server. Membungkus pengiriman formulir dalam transisi memungkinkan React menurunkan prioritas perjalanan bolak-balik ke server dan menjaga halaman tetap responsif. Inilah yang membuat pengalaman yang ditingkatkan dengan JavaScript terasa jauh lebih cepat daripada pemuatan ulang halaman penuh.

Tanpa JavaScript: pengguna mengeklik kirim, peramban mengirim POST halaman penuh, lalu server merespons dengan halaman HTML baru (termasuk kilatan putih singkat dan pengaturan ulang guliran). Dengan JavaScript: React mencegat pengiriman, tindakan berjalan secara asinkron, dan hanya bagian halaman yang berubah yang diperbarui langsung — tanpa kilatan dan tanpa pengaturan ulang guliran.

Peningkatan progresif bermanfaat bagi perayap mesin pencari yang mungkin tidak menjalankan JavaScript. Halaman pencarian atau penyaringan berbasis formulir yang berfungsi sebagai formulir HTML halaman penuh dapat diindeks dan dirayapi. Hasil yang dirender server berarti perayap melihat konten nyata, bukan div kosong yang menunggu JavaScript.

Pembaca layar dan teknologi asistif bekerja paling baik dengan HTML semantik. Formulir yang ditingkatkan secara progresif menggunakan elemen <form>, <input>, dan <button> nyata yang dipahami secara bawaan oleh teknologi asistif. JavaScript menambahkan wilayah pembaruan langsung ARIA untuk pengumuman kesalahan, sehingga meningkatkan, bukan menggantikan, dasar yang aksesibel.

Pada jaringan yang tidak andal, bundel JavaScript mungkin gagal dimuat. Halaman yang ditingkatkan secara progresif tetap berfungsi untuk penggunaan dasar. Ketahanan ini sangat penting terutama bagi pengguna koneksi seluler di wilayah dengan jangkauan yang buruk, atau di daerah yang kondisi jaringannya sangat bervariasi.

Peningkatan progresif paling bermanfaat untuk formulir yang ditujukan kepada publik: pendaftaran, kontak, pencarian, dan pembayaran. Dasbor internal dengan interaktivitas kompleks mungkin tidak memerlukannya. Terapkan pendekatan ini secara sengaja di tempat jangkauan dan keandalan maksimum penting, seperti halaman pemasaran, perdagangan elektronik, dan alur orientasi pengguna.

Peningkatan progresif berarti formulir berfungsi sebagai POST HTML biasa tanpa JavaScript. Tindakan Server mendukungnya secara bawaan: action={serverAction} memungkinkan pengiriman POST halaman penuh. Hidrasi React kemudian meningkatkan formulir menjadi pembaruan asinkron langsung dengan status menunggu. Pendekatan ini bermanfaat bagi aksesibilitas, optimisasi mesin pencari, dan pengguna dengan konektivitas rendah, sekaligus tetap memberikan pengalaman JavaScript yang kaya.