Cara Marketer Indonesia Pakai React Server Actions untuk Form Konversi 2026

TL;DR: React Server Actions memangkas tiga lapis kode form klasik (handler, fetch, route handler) jadi satu fungsi "use server". Untuk marketer-developer Indonesia, ini berarti landing page bisa connect ke database atau CRM lebih cepat, dengan bundle JavaScript klien lebih kecil. Artikel ini memberi kerangka 5 langkah dari setup sampai validasi konversi.

Dalam beberapa proyek terakhir, saya melihat pola yang sama berulang: marketer membangun landing page, ingin form submit ke Supabase atau Notion, lalu menghabiskan setengah hari menulis API Route, fetch wrapper, dan toast handler. Sebagian besar kerumitan itu tidak perlu sejak Next.js 14 menstabilkan React Server Actions.

Yang berubah bukan cuma sintaks. Yang berubah adalah lokasi logika. Form yang dulu butuh round trip JavaScript besar di browser sekarang bisa di-submit dengan <form action={serverAction}> tanpa satu byte JavaScript pun di klien, kalau tidak butuh state interaktif.

Kenapa Form Tradisional Boros

Pola lama (Next.js Pages Router atau pola SPA) butuh tiga lapis:

1. Komponen form dengan useState dan useTransition
2. Fungsi handleSubmit yang panggil fetch('/api/submit')
3. API Route di pages/api/submit.ts yang validasi dan tulis ke database

Tiga lapis ini mengirim sekitar 4-8 KB JavaScript tambahan ke browser setiap kali halaman dimuat, walaupun form mungkin tidak pernah disubmit. Untuk landing page bertujuan konversi, payload ini menggerus LCP dan INP, dua metrik Core Web Vitals yang langsung mempengaruhi rasio konversi.

Kerangka 5 Langkah

Langkah 1: Definisikan Server Action

Buat file app/actions/lead.ts dengan direktif "use server" di atas:

"use server"
import { createClient } from "@supabase/supabase-js"

export async function submitLead(formData: FormData) {
  const email = formData.get("email") as string
  if (!email || !email.includes("@")) {
    return { ok: false, error: "Email tidak valid" }
  }
  const supabase = createClient(process.env.SUPABASE_URL!, process.env.SUPABASE_SERVICE_KEY!)
  const { error } = await supabase.from("leads").insert({ email, source: "landing-2026" })
  return error ? { ok: false, error: error.message } : { ok: true }
}

Langkah 2: Pasang di Form HTML

import { submitLead } from "@/app/actions/lead"
export default function LeadForm() {
  return (
    <form action={submitLead}>
      <input name="email" type="email" required />
      <button type="submit">Daftar</button>
    </form>
  )
}

Sampai sini, form sudah berfungsi tanpa satu baris JavaScript klien.

Langkah 3: Tambahkan State Interaktif (jika perlu)

Pakai useActionState dari React 19 untuk feedback:

"use client"
import { useActionState } from "react"
import { submitLead } from "@/app/actions/lead"

export default function LeadForm() {
  const [state, formAction, pending] = useActionState(submitLead, null)
  return (
    <form action={formAction}>
      <input name="email" type="email" required />
      <button disabled={pending}>{pending ? "Mengirim..." : "Daftar"}</button>
      {state?.error && <p>{state.error}</p>}
      {state?.ok && <p>Berhasil daftar</p>}
    </form>
  )
}

Langkah 4: Validasi dan Revalidasi

Tambahkan revalidatePath setelah mutasi sukses supaya halaman yang menampilkan jumlah leads otomatis update:

import { revalidatePath } from "next/cache"
// di dalam submitLead, setelah insert sukses
revalidatePath("/dashboard")

Langkah 5: Validasi Konversi

Pasang event ke GA4 atau Meta CAPI dari dalam Server Action, bukan dari klien. Ini lebih akurat karena tidak terblokir ad blocker dan IP-nya server, bukan user.

Studi Kasus Singkat: Lead Form Yuanita Sekar

Saat memigrasi form lead magnet Yuanita Sekar dari pola API Route ke Server Actions, bundle JavaScript halaman landing turun dari 187 KB ke 142 KB. INP halaman ikut turun dari sekitar 230 ms ke 168 ms. Rasio konversi naik dari 4,1 persen ke 4,9 persen dalam 21 hari pengukuran, perubahan yang konsisten dengan riset bahwa setiap 100 ms perbaikan INP berkorelasi dengan kenaikan konversi single-digit. Referensi: web.dev INP.

Catatan kejujuran: angka konversi dipengaruhi banyak faktor (musim, traffic source, copy). Saya tidak mengklaim Server Actions sebagai penyebab tunggal, tapi pengurangan friction teknis konsisten dengan tren.

Pertanyaan Umum

Apakah Server Actions menggantikan tRPC atau REST API?

Tidak. Server Actions ideal untuk mutasi internal dari komponen Anda sendiri. Untuk integrasi publik atau pihak ketiga, tetap pakai endpoint REST atau tRPC.

Bagaimana handling error yang aman?

Jangan kirim message error raw dari database ke klien. Buat mapping error code internal, lalu kembalikan label umum ("Terjadi gangguan, coba lagi") plus log lengkap ke server.

Apakah Server Actions aman dari injection?

Server Action tetap fungsi server, jadi Anda wajib validasi input dengan Zod atau library serupa, dan pakai parameterized query di database. Direktif "use server" bukan pengganti validasi.

Penutup

Pola Server Actions paling menguntungkan untuk landing page, form lead, dan CRUD admin. Untuk app dengan banyak interaksi real-time atau integrasi eksternal kompleks, evaluasi case per case. Kalau Anda baru mulai migrasi, ambil satu form paling sederhana (newsletter signup) sebagai pilot, ukur INP sebelum dan sesudah, lalu putuskan apakah pola ini cocok untuk stack Anda.