Digital Transformation
React Server Actions
TL;DR: React Server Actions adalah fungsi async yang dideklarasikan dengan direktif
"use server", dijalankan di server, tetapi bisa dipanggil langsung dari komponen React tanpa membuat endpoint API. Sejak Next.js 14, fitur ini stabil dan menjadi pola default untuk form submission dan mutasi data.
Apa itu React Server Actions?
React Server Actions adalah pola di React 19 dan Next.js App Router yang memungkinkan Anda menulis logika server (insert ke database, kirim email, panggil API pihak ketiga) sebagai fungsi biasa, lalu memanggilnya dari komponen klien seolah-olah fungsi lokal. Framework yang mengurus serialisasi argumen, network request, dan revalidasi cache. Pola ini mengurangi boilerplate yang biasa muncul saat Anda harus membangun endpoint API terpisah untuk setiap mutasi data.
Analogi sederhana: dulu setiap tombol kirim form memerlukan tiga lapis kode (handler form, fetch ke endpoint, route handler di server). Server Actions melipat ketiganya jadi satu fungsi yang ditandai "use server".
Cara Kerja
| Bagian | Tugas |
|---|---|
Direktif "use server" | Menandai fungsi atau file sebagai server-only |
| Compiler Next.js | Menggantikan pemanggilan fungsi di klien jadi POST request internal |
| Form action | Server Action bisa langsung dipakai sebagai prop action di <form> |
revalidatePath / revalidateTag | Membersihkan cache halaman setelah mutasi |
Server Actions wajib async dan tidak boleh mengembalikan komponen React. Argumen dan return value harus serializable (string, number, plain object, FormData).
Kenapa Penting?
Untuk marketer-developer yang membangun landing page atau funnel, Server Actions mempercepat iterasi karena form bisa terhubung langsung ke Supabase atau Notion API tanpa membangun layer API tambahan. Pada beberapa proyek Vito Atmo, migrasi dari pola tradisional API Routes ke Server Actions memangkas baris kode form-to-database sekitar 30-40 persen. Lihat dokumentasi resmi di React Server Actions untuk referensi konvensi terbaru.
Pertanyaan Umum
Apakah Server Actions menggantikan API Routes sepenuhnya?
Tidak. Untuk integrasi pihak ketiga (webhook, OAuth callback, public API) Anda tetap memerlukan API Routes. Server Actions ideal untuk mutasi internal dari komponen Anda sendiri.
Apakah aman dari CSRF?
Next.js menambahkan proteksi origin check otomatis untuk Server Actions, tapi Anda tetap perlu validasi input dan otorisasi user di dalam fungsi.
Istilah Terkait