Server Actions Dasar: Fungsi Server Tanpa API

Idenya

Dulu, untuk menyimpan data form kamu butuh: form di client, API endpoint, fetch manual, dan handling loading. Server Actions memangkas semua itu jadi satu fungsi yang berjalan di server tapi dipanggil seperti fungsi biasa.

Membuat Server Action

Tambahkan "use server" di atas fungsi async:

// app/kontak/actions.ts
"use server";

export async function kirimPesan(formData: FormData) {
  const nama = formData.get("nama");
  const pesan = formData.get("pesan");

  // simpan ke database di sini
  console.log("Pesan dari:", nama, "-", pesan);

  return { sukses: true };
}

Memakai di form

Teruskan fungsi ke atribut action pada <form>:

// app/kontak/page.tsx
import { kirimPesan } from "./actions";

export default function KontakPage() {
  return (
    <form action={kirimPesan}>
      <input name="nama" placeholder="Nama" required />
      <textarea name="pesan" placeholder="Pesan" required />
      <button type="submit">Kirim</button>
    </form>
  );
}

Tidak ada onSubmit, tidak ada fetch, tidak ada useState untuk loading. Next.js menangani semuanya, termasuk progressive enhancement: form tetap jalan walau JavaScript dimatikan.

Di Client Component juga bisa

Server Action bisa di-import dan dipanggil dari Client Component seperti fungsi biasa (return-nya Promise):

"use client";

import { kirimPesan } from "./actions";

export default function FormClient() {
  async function handle(formData: FormData) {
    const hasil = await kirimPesan(formData);
    if (hasil.sukses) alert("Terkirim!");
  }
  return <form action={handle}>...</form>;
}

Kesalahan umum pemula

• Tidak memvalidasi input. Server Action menerima data dari browser yang tidak terpercaya. Tanpa validasi, data kotor masuk ke database.
• Mengira action berjalan di browser. Kode action jalan di server. Jangan pakai window, localStorage, atau mengakses DOM di dalamnya.
• Me-return data sensitif. Return value action dikirim ke browser. Jangan kembalikan password hash, token internal, atau data rahasia lain.

Latihan singkat

1. Buat form newsletter sederhana dengan Server Action yang menyimpan email ke array di memori.
2. Coba submit form dengan JavaScript dimatikan di browser (DevTools). Pastikan form tetap berfungsi.

Rangkuman

• Server Action adalah fungsi server ("use server") yang dipanggil seperti fungsi biasa.
• Dipakai lewat atribut action pada <form>: tanpa fetch, tanpa onSubmit manual.
• Form tetap jalan walau JavaScript dimatikan (progressive enhancement).
• Selalu validasi input di dalam action karena data dari browser tidak terpercaya.

Catatan teknis: Server Action berjalan di server, tapi inputnya datang dari browser yang tidak bisa dipercaya. Jangan pernah menganggap data form sudah bersih. Selalu validasi di dalam action (dibahas di modul berikutnya) sebelum menyentuh database.