Studi Kasus Aris Setiawan: Migrasi Form Konsultasi ke Server Actions Pangkas Bundle JavaScript 47 KB dan Naikkan Submit Rate dari 2,1 ke 4,8 Persen di 2026

TL;DR: Personal brand Aris Setiawan (legal consultant) punya tiga form lead capture di landing page yang dibangun pakai pola lama (REST API + fetch + state management manual). Setelah migrasi ke Server Actions Next.js pada Maret 2026, bundle JavaScript turun 47 KB, INP halaman membaik dari 280 ke 140 ms, dan submit rate naik dari 2,1 ke 4,8 persen dalam 30 hari. Studi internal ini fokus pada trade-off teknis dan hasil terukur.

Dalam tiga proyek terakhir yang saya bantu, satu masalah konsisten muncul di landing page konsultan profesional: form sederhana dibangun dengan boilerplate berlebih. State loading, error handling, validasi, semua ditulis manual di client component. Hasilnya: bundle membengkak, INP buruk, dan form kadang gagal jalan kalau JavaScript lambat dimuat.

Project Aris Setiawan jadi contoh paling representatif. Tiga form di landing page hukum: konsultasi gratis, request demo, dan newsletter. Total kode form sebelum migrasi: 312 baris TypeScript di client component. Setelah migrasi ke Server Actions: 87 baris, 70 persen reduksi.

Apa Masalahnya?

Form dengan REST API butuh boilerplate berikut:

1. Endpoint /api/lead dengan validasi dan auth.
2. Client component dengan useState untuk loading, error, dan data.
3. fetch() call manual dengan error handling.
4. Toast notification atau redirect logic.
5. Reset form state setelah sukses.

Masing-masing form butuh stack lengkap di atas. Untuk tiga form, total: 14 file, 312 baris kode, dan dependency react-hook-form sebesar 31 KB. Saat saya audit performa Maret 2026, INP halaman konsultasi Aris mencapai 280 ms (di atas threshold "good" 200 ms). Submit rate stagnan di 2,1 persen.

Framework Migrasi yang Saya Pakai

Untuk validasi, saya pakai Zod yang dijalankan di server side di dalam action. Tidak ada validasi client-side berlebihan. Browser bawaan (required, pattern, type="email") sudah cukup untuk UX, sisanya divalidasi di server.

Studi Kasus Aris Setiawan

Aris adalah konsultan hukum yang fokus pada UMKM. Landing page-nya dibangun dengan Next.js 14 App Router sejak Januari 2026. Tiga form lead capture:

• Form konsultasi gratis (5 field: nama, email, WhatsApp, jenis bisnis, kebutuhan).
• Form request demo paket premium (3 field).
• Form newsletter (1 field).

Langkah migrasi yang dijalankan tim:

1. Audit bundle pakai next build --analyze, identifikasi 47 KB chunk dari form code.
2. Tulis Server Action di app/kontak/actions.ts dengan validasi Zod inline.
3. Ganti <form onSubmit={...}> jadi <form action={submitConsultation}>.
4. Hapus useState loading dan ganti dengan useFormStatus dari React.
5. Pasang revalidatePath untuk update jumlah lead di dashboard admin.
6. Test progressive enhancement: disable JavaScript di DevTools, pastikan form tetap submit.

Hasil Setelah 30 Hari

Metrik teknis:

• Bundle JavaScript first-load turun dari 187 KB ke 140 KB (47 KB reduction).
• INP P75 membaik dari 280 ke 140 ms.
• LCP halaman tetap stabil di 1,9 detik.
• Build time turun 18 persen karena chunk lebih sedikit.

Metrik bisnis (data internal Aris):

• Submit rate form konsultasi naik dari 2,1 ke 4,8 persen.
• Total leads per bulan naik dari 47 ke 109.
• Lead quality (yang lanjut ke discovery call) tetap sama: sekitar 38 persen.

Faktor utama kenaikan submit rate: form tetap jalan saat koneksi lambat (progressive enhancement) dan INP yang lebih cepat membuat form terasa lebih responsif di mobile. Data ini sejalan dengan riset web.dev tentang INP yang menunjukkan korelasi langsung antara INP dan conversion rate.

Pertanyaan Umum

Apakah Server Actions cocok untuk semua form?

Untuk form dengan side effect server (save ke DB, kirim email), ya. Untuk form pencarian client-side atau filter UI murni, tetap pakai client state biasa.

Bagaimana handling rate limiting?

Server Actions bisa dipasangi rate limiter di dalam action body. Saya pakai pola dengan upstash redis seperti dijelaskan di artikel rate limiting.

Apakah aman dari CSRF?

Next.js otomatis validasi origin header dan pakai unique action ID per build. Tetap perlu validasi auth di dalam action untuk endpoint sensitif.

Bisakah dipakai di project Pages Router?

Tidak. Server Actions eksklusif App Router. Pages Router harus migrasi dulu atau tetap pakai API routes.

Insight Aplikatif

Pola Server Actions bukan sekadar simplifikasi syntax. Trade-off utama: control granular hilang di sisi client (tidak ada custom loading state per field), tapi dapat progressive enhancement, bundle lebih ramping, dan cache revalidation otomatis. Untuk landing page personal brand atau bisnis kecil di Indonesia yang fokus konversi, trade-off ini layak. Untuk form kompleks dengan dependency state antar-field, tetap evaluasi kebutuhan dulu.