Birokrasi Form yang Terlalu Panjang
Sebagai *React Developer*, jika kamu ingin membuat Form Tambah Komentar, kamu harus melewati birokrasi yang panjang:
- Membuat State (
useState) untuk menangkap teks komentar. - Membuat fungsi
handleSubmit. - Membuat File API Route khusus (misal:
POST /api/comments) di folder Backend. - Menulis perintah
fetch()atauaxiosdi Frontend untuk menembak API tersebut.
Untuk menghemat waktu miliaran developer, tim React merilis fitur revolusioner bernama Server Actions (yang saat ini dipelopori penggunaannya oleh Next.js App Router).
Apa Itu Server Actions?
Server Actions memungkinkan komponen *Frontend*-mu untuk mengeksekusi fungsi Backend secara langsung di dalam file komponen yang sama! Kamu tidak perlu lagi membuat file API terpisah atau menulis perintah fetch().
Sintaks Ajaib ('use server')
Perhatikan contoh Form ajaib ini. Fungsi simpanKomentar akan otomatis dieksekusi di dalam komputer server, padahal ia dipanggil langsung dari tag HTML!
// File: KomentarForm.tsx
export default function KomentarForm() {
// Ini adalah Server Action!
async function simpanKomentar(formData) {
'use server'; // Mantra ini memberitahu React agar fungsi ini jalan di Server, bukan di Browser!
const teks = formData.get('komentar');
// LANGSUNG TEMBAK DATABASE SQL!
await db.comment.insert({ text: teks });
}
return (
// Memanggil fungsi Backend secara ajaib tanpa fetch!
<form action={simpanKomentar}>
<input type="text" name="komentar" placeholder="Tulis komentar..." />
<button type="submit">Kirim</button>
</form>
);
}Apakah Ini Berbahaya?
Melihat kode Database dicampur dengan HTML mungkin membuat para veteran PHP/CodeIgniter bernostalgia (dan ketakutan). Namun, Next.js memastikan ini sangat aman. Saat proses kompilasi (Build), kode di dalam fungsi 'use server' akan secara gaib dipisahkan dan diubah menjadi *Endpoint API* tersembunyi. Pengunjung (Hacker) yang mengecek Inspect Element di browser sama sekali tidak akan bisa melihat kode *Database*-mu.
Server Actions adalah masa depan React, karena ia berfungsi sempurna bahkan jika pengunjung menonaktifkan JavaScript di browser mereka!
Mau langsung pakai template?
Jelajahi template gratis dan premium di TampilKit untuk mempercepat proses development project kamu.
Browse Templates