Server Actions — CompileDaily Study

Penjelasan

Server Action adalah fungsi yang ditandai 'use server' — dijalankan DI SERVER meski dipanggil dari form/event di Client Component, TANPA perlu bikin Route Handler/API endpoint terpisah. Paling umum dipakai sebagai action prop di elemen <form>, otomatis menerima FormData sebagai argumen.

Contoh Konsep

// app/produk/actions.js
'use server';

export async function tambahProduk(formData) {
    const nama = formData.get('nama');
    // simpan ke database di sini...
    console.log(`Menyimpan produk: ${nama}`);
}

// app/produk/page.js
import { tambahProduk } from './actions';

export default function FormProduk() {
    return (
        <form action={tambahProduk}>
            <input name="nama" type="text" />
            <button type="submit">Simpan</button>
        </form>
    );
}

Praktikum

Buat Server Action tambahArtikel(formData) di file terpisah dengan 'use server', membaca field 'judul' dari formData dan mencetaknya ke console. Tulis contoh form yang memakai action itu langsung di atribut action.

Editor Latihan

Ketik/edit bebas di sini untuk latihan — kode ini tidak dijalankan.

Tips

Server Action BOLEH dipakai TANPA JavaScript aktif di browser sama sekali (progressive enhancement) — form dengan action={tambahProduk} tetap berfungsi walau JS di-nonaktifkan, karena secara fundamental ia tetap submit form biasa yang ditangani server, cuma "dibungkus" jadi terasa seperti pemanggilan fungsi biasa.