Server Actions (Next.js)

TL;DR: Server Actions adalah fitur Next.js App Router yang memungkinkan komponen React memanggil fungsi server langsung tanpa membuat endpoint API manual. Ditandai direktif "use server", fungsi ini menerima FormData atau argumen biasa, menjalankan logika di server, dan otomatis revalidate cache halaman. Stabil sejak Next.js 14 (Oktober 2023), jadi pola default untuk form di App Router.

Apa itu Server Actions?

Server Actions adalah pola Next.js di mana fungsi async di-mark dengan "use server" lalu di-import ke client component atau dipasang di atribut action form. Saat dipanggil, Next.js otomatis mengirim request ke server, menjalankan fungsi, dan men-stream hasil kembali. Tidak butuh route handler manual di app/api/. Pola ini bagian dari React Server Components dan menggantikan banyak use case Edge Functions tradisional.

Keuntungan utama: progressive enhancement otomatis, validasi server-side built-in, dan revalidation cache via revalidatePath() atau revalidateTag() dalam satu baris. Form tetap jalan kalau JavaScript gagal dimuat.

Cara Pakai

// app/kontak/actions.ts
"use server";
import { revalidatePath } from "next/cache";

export async function submitForm(formData: FormData) {
  const email = formData.get("email") as string;
  await saveLead(email);
  revalidatePath("/kontak");
}

// app/kontak/page.tsx
import { submitForm } from "./actions";
export default function Page() {
  return (
    <form action={submitForm}>
      <input name="email" type="email" required />
      <button type="submit">Kirim</button>
    </form>
  );
}

Untuk error handling dan loading state, pasangkan dengan hook useActionState dan useFormStatus dari React.

Kenapa Penting?

Untuk marketer yang juga build landing page, Server Actions memangkas boilerplate 60-80 persen dibanding pola lama (REST API + fetch + state management). Kode form lead capture turun dari 80-120 baris ke 15-25 baris. Praktik standar di industri menunjukkan tim yang adopsi Server Actions mengurangi waktu development form 40-55 persen. Project Vito Atmo di Atmo LMS migrasi 14 form lead capture dari API routes ke Server Actions pada Maret 2026, hasilnya bundle JavaScript client turun 42 KB.

Dokumentasi resmi tersedia di Next.js Server Actions docs. Pola ini sekarang default-recommended untuk semua mutasi data di App Router.

Pertanyaan Umum

Apakah Server Actions aman dari CSRF?

Ya. Next.js otomatis memvalidasi origin header dan menggunakan unique action ID per build. Tapi tetap validasi input dan auth di dalam fungsi action.

Bisakah dipakai di Pages Router?

Tidak. Server Actions hanya untuk App Router. Pages Router tetap pakai API routes.