Digital Transformation
Server Action
TL;DR: Server Action adalah fungsi JavaScript di Next.js App Router yang berjalan di server namun dipanggil langsung dari komponen React, tanpa perlu menulis endpoint API secara terpisah. Pola ini menyederhanakan alur formulir, mutasi data, dan integrasi backend bagi tim kecil.
Apa itu Server Action?
Server Action adalah fungsi yang ditandai dengan direktif 'use server' di awal file atau di awal definisi fungsi, lalu di-import oleh komponen React. Saat dipanggil dari sisi klien, Next.js otomatis mengubahnya menjadi request server, menjalankan fungsi tersebut di lingkungan Node atau Edge Runtime, lalu mengembalikan hasil ke klien. Bagi pengembang yang terbiasa membangun endpoint REST untuk setiap formulir, pendekatan ini memangkas boilerplate dengan signifikan.
Konsep ini menjadi bagian dari arsitektur React Server Components yang juga melibatkan strategi rendering SSR dan SSG untuk memuat halaman pertama. Server Action mengurus sisi mutasi, sementara komponen server mengurus sisi pembacaan data.
Pola Pemanfaatan Server Action
| Use case | Contoh | Manfaat |
|---|---|---|
| Submit formulir kontak | <form action={kirimPesan}> | Validasi server tanpa endpoint manual |
| Tambah item ke keranjang | await tambahKeranjang(id) | Mutasi langsung tanpa fetch JSON |
| Auth flow login email | await loginDenganEmail(email) | Logika rahasia tetap di server |
| Rate limit komentar | await postKomentar(payload) | Pengecekan rate dijalankan di server |
Pengembang dapat mengombinasikan Server Action dengan revalidatePath atau revalidate tag untuk menyegarkan halaman setelah mutasi. Dokumentasi resmi tersedia di Next.js Server Actions.
Kenapa Penting?
Untuk personal brand atau UMKM yang merancang website fungsional tanpa tim backend besar, Server Action menurunkan beban arsitektur. Saat saya membangun fitur newsletter di vitoatmo.com, saya tidak perlu menyiapkan /api/subscribe terpisah. Cukup satu fungsi yang dipanggil dari form, dan validasi e-mail beserta penyimpanan ke database berjalan rapi di server. Hasilnya, kode lebih pendek dan permukaan serangan lebih sempit karena tidak ada endpoint publik tambahan.
Pertanyaan Umum
Apakah Server Action aman?
Aman jika divalidasi dengan benar. Server Action tetap merupakan endpoint server yang menerima input, jadi validasi dan rate limiting tetap wajib.
Bisakah Server Action dipakai di Pages Router?
Tidak. Server Action eksklusif untuk App Router pada Next.js 14 ke atas. Tim yang masih di Pages Router perlu memakai API Route konvensional.
Istilah Terkait