Validasi React Server Action: Panduan Komprehensif untuk Pemrosesan Input Formulir dan Keamanan

Pengenalan React Server Actions telah menandai pergeseran paradigma yang signifikan dalam pengembangan full-stack dengan kerangka kerja seperti Next.js. Dengan mengizinkan komponen klien untuk memanggil fungsi sisi server secara langsung, kita sekarang dapat membangun aplikasi yang lebih kohesif, efisien, dan interaktif dengan lebih sedikit boilerplate. Namun, abstraksi baru yang kuat ini membawa tanggung jawab kritis ke garis depan: validasi input dan keamanan yang tangguh.

Ketika batas antara klien dan server menjadi begitu mulus, mudah untuk mengabaikan prinsip-prinsip dasar keamanan web. Setiap input yang datang dari pengguna tidak dapat dipercaya dan harus diverifikasi secara ketat di server. Panduan ini memberikan eksplorasi komprehensif tentang pemrosesan dan validasi input formulir dalam React Server Actions, mencakup segalanya mulai dari prinsip dasar hingga pola canggih yang siap produksi yang memastikan aplikasi Anda ramah pengguna dan aman.

Apa Sebenarnya React Server Actions itu?

Sebelum mendalami validasi, mari kita rekap secara singkat apa itu Server Actions. Pada intinya, mereka adalah fungsi yang Anda definisikan di server tetapi dapat dieksekusi dari klien. Ketika pengguna mengirimkan formulir atau mengklik tombol, Server Action dapat dipanggil secara langsung, melewati kebutuhan untuk membuat endpoint API secara manual, menangani permintaan `fetch`, dan mengelola status pemuatan/error.

Mereka dibangun di atas fondasi formulir HTML dan API `FormData` dari Platform Web, membuatnya ditingkatkan secara progresif secara default. Ini berarti formulir Anda akan tetap berfungsi bahkan jika JavaScript gagal dimuat, memberikan pengalaman pengguna yang tangguh.

Contoh Server Action dasar:

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

export async function createUser(formData) {
  const name = formData.get('name');
  const email = formData.get('email');

  // ... logika untuk menyimpan pengguna ke database
  console.log('Creating user:', { name, email });
}

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

export default function UserForm() {
  return (
    

      
      
      Create User
    
  );
}
            

              
                Copy
              
            
          

Kesederhanaan ini sangat kuat, tetapi juga menyembunyikan kompleksitas dari apa yang sedang terjadi. Fungsi `createUser` berjalan secara eksklusif di server, namun dipanggil dari komponen klien. Jalur langsung ke logika server Anda inilah yang menjadi alasan mengapa validasi bukan hanya sebuah fitur—itu adalah sebuah keharusan.

Pentingnya Validasi yang Tak Tergoyahkan

Dalam dunia Server Actions, setiap fungsi adalah gerbang terbuka ke server Anda. Validasi yang tepat bertindak sebagai penjaga di gerbang itu. Inilah mengapa hal itu tidak bisa ditawar:

• Integritas Data: Database dan status aplikasi Anda bergantung pada data yang bersih dan dapat diprediksi. Validasi memastikan bahwa Anda tidak menyimpan alamat email yang salah format, string kosong di tempat yang seharusnya nama, atau teks di bidang yang dimaksudkan untuk angka.
• Pengalaman Pengguna (UX) yang Ditingkatkan: Pengguna membuat kesalahan. Pesan error yang jelas, segera, dan spesifik konteks membimbing mereka untuk memperbaiki input mereka, mengurangi frustrasi dan meningkatkan tingkat penyelesaian formulir.
• Keamanan yang Kokoh: Ini adalah aspek yang paling kritis. Tanpa validasi sisi server, aplikasi Anda rentan terhadap berbagai serangan, termasuk:
  • SQL Injection: Aktor jahat dapat mengirimkan perintah SQL di bidang formulir untuk memanipulasi database Anda.
  • Cross-Site Scripting (XSS): Jika Anda menyimpan dan merender input pengguna yang tidak disanitasi, penyerang dapat menyuntikkan skrip berbahaya yang dieksekusi di browser pengguna lain.
  • Denial of Service (DoS): Mengirimkan data yang tiba-tiba besar atau mahal secara komputasi dapat membebani sumber daya server Anda.

Validasi Sisi Klien vs. Sisi Server: Kemitraan yang Diperlukan

Penting untuk dipahami bahwa validasi harus terjadi di dua tempat:

1. Validasi Sisi Klien: Ini untuk UX. Ini memberikan umpan balik instan tanpa perjalanan bolak-balik jaringan. Anda dapat menggunakan atribut HTML5 sederhana seperti `required`, `minLength`, `pattern`, atau JavaScript untuk memeriksa format saat pengguna mengetik. Namun, ini dapat dengan mudah dilewati dengan menonaktifkan JavaScript atau menggunakan alat pengembang.
2. Validasi Sisi Server: Ini untuk keamanan dan integritas data. Ini adalah sumber kebenaran utama aplikasi Anda. Tidak peduli apa yang terjadi di klien, server harus memvalidasi ulang semua yang diterimanya. Server Actions adalah tempat yang sempurna untuk mengimplementasikan logika ini.

Aturan praktis: Gunakan validasi sisi klien untuk pengalaman pengguna yang lebih baik, tetapi selalu hanya percayai validasi sisi server untuk keamanan.

Mengimplementasikan Validasi di Server Actions: Dari Dasar hingga Lanjutan

Mari kita bangun strategi validasi kita, mulai dari pendekatan sederhana dan beralih ke solusi yang lebih tangguh dan dapat diskalakan menggunakan alat modern.

Pendekatan 1: Validasi Manual dan Mengembalikan State

Cara paling sederhana untuk menangani validasi adalah dengan menambahkan pernyataan `if` di dalam Server Action Anda dan mengembalikan objek yang menunjukkan keberhasilan atau kegagalan.

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

import { redirect } from 'next/navigation';

export async function createInvoice(formData) {
  const customerName = formData.get('customerName');
  const amount = formData.get('amount');

  if (!customerName || customerName.trim() === '') {
    return { success: false, message: 'Customer name is required.' };
  }

  if (!amount || isNaN(Number(amount)) || Number(amount) <= 0) {
    return { success: false, message: 'Please enter a valid amount greater than zero.' };
  }

  // ... logika untuk membuat faktur di database
  console.log('Invoice created for', customerName, 'with amount', amount);
  
  redirect('/dashboard/invoices');
}
            

              
                Copy
              
            
          

Pendekatan ini berhasil, tetapi memiliki kelemahan UX yang besar: memerlukan pemuatan ulang halaman penuh untuk menampilkan pesan error. Kita tidak dapat dengan mudah menampilkan pesan di halaman formulir itu sendiri. Di sinilah hook React untuk Server Actions berperan.

Pendekatan 2: Menggunakan `useFormState` untuk Penanganan Error yang Mulus

Hook `useFormState` dirancang khusus untuk tujuan ini. Ini memungkinkan Server Action untuk mengembalikan state yang dapat digunakan untuk memperbarui UI tanpa peristiwa navigasi penuh. Ini adalah landasan penanganan formulir modern dengan Server Actions.

Mari kita refactor formulir pembuatan faktur kita.

Langkah 1: Perbarui Server Action

Action sekarang perlu menerima dua argumen: `prevState` dan `formData`. Ini harus mengembalikan objek state baru yang akan digunakan `useFormState` untuk memperbarui komponen.

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

import { revalidatePath } from 'next/cache';
import { redirect } from 'next/navigation';

// Tentukan bentuk state awal
const initialState = {
  message: null,
  errors: {},
};

export async function createInvoice(prevState, formData) {
  const customerName = formData.get('customerName');
  const amount = formData.get('amount');
  const status = formData.get('status');

  const errors = {};
  if (!customerName || customerName.trim().length < 2) {
    errors.customerName = 'Customer name must be at least 2 characters.';
  }
  if (!amount || isNaN(Number(amount)) || Number(amount) <= 0) {
    errors.amount = 'Please enter a valid amount.';
  }
  if (status !== 'pending' && status !== 'paid') {
    errors.status = 'Please select a valid status.';
  }

  if (Object.keys(errors).length > 0) {
    return {
      message: 'Failed to create invoice. Please check the fields.',
      errors,
    };
  }

  try {
    // ... logika untuk menyimpan ke database
    console.log('Invoice created successfully!');
  } catch (e) {
    return {
      message: 'Database Error: Failed to create invoice.',
      errors: {},
    };
  }

  // Validasi ulang cache untuk halaman faktur dan alihkan
  revalidatePath('/dashboard/invoices');
  redirect('/dashboard/invoices');
}

            

              
                Copy
              
            
          

Langkah 2: Perbarui Komponen Formulir dengan `useFormState`

Di komponen klien kita, kita akan menggunakan hook untuk mengelola state formulir dan menampilkan error.

            // app/ui/invoices/create-form.js
'use client';

import { useFormState } from 'react-dom';
import { createInvoice } from '@/app/actions';

const initialState = {
  message: null,
  errors: {},
};

export function CreateInvoiceForm() {
  const [state, dispatch] = useFormState(createInvoice, initialState);

  return (
    

      

        Customer Name
        
        {state.errors?.customerName && 
          
{state.errors.customerName}
}
      
      
      

        Amount
        
        {state.errors?.amount && 
          
{state.errors.amount}
}
      

      {/* ... bidang lainnya ... */}

      {state.message && 
{state.message}
}
      
      Create Invoice
    
  );
}
            

              
                Copy
              
            
          

Sekarang, ketika pengguna mengirimkan formulir yang tidak valid, Server Action berjalan, mengembalikan objek error, dan `useFormState` memperbarui variabel `state`. Komponen dirender ulang, menampilkan pesan error spesifik tepat di sebelah bidang yang sesuai—semua tanpa pemuatan ulang halaman. Ini adalah peningkatan UX yang luar biasa!

Pendekatan 3: Meningkatkan UX dengan `useFormStatus`

Apa yang terjadi saat Server Action sedang berjalan? Pengguna mungkin mengklik tombol kirim beberapa kali. Kita dapat memberikan umpan balik menggunakan hook `useFormStatus`, yang memberi kita informasi tentang status pengiriman formulir terakhir.

Penting: `useFormStatus` harus digunakan dalam komponen yang merupakan anak dari elemen `

            // app/ui/submit-button.js
'use client';

import { useFormStatus } from 'react-dom';

export function SubmitButton() {
  const { pending } = useFormStatus();

  return (
    
      {pending ? 'Creating...' : 'Create Invoice'}
    
  );
}

// Di komponen CreateInvoiceForm Anda:
import { SubmitButton } from './submit-button';

// ...

  {/* ... bidang formulir ... */}
  

            

              
                Copy
              
            
          

Dengan tambahan sederhana ini, tombol kirim sekarang akan dinonaktifkan dan menunjukkan "Creating..." saat server sedang memproses permintaan, mencegah pengiriman duplikat dan memberikan umpan balik yang jelas kepada pengguna.

Pendekatan 4: Validasi Kelas Produksi dengan Zod

Pemeriksaan `if` manual baik untuk formulir sederhana, tetapi untuk aplikasi yang kompleks, mereka menjadi bertele-tele, rentan terhadap kesalahan, dan sulit dipelihara. Di sinilah pustaka validasi skema seperti Zod, Yup, atau Valibot bersinar.

Zod adalah pustaka deklarasi dan validasi skema yang mengutamakan TypeScript. Ini memungkinkan Anda untuk mendefinisikan satu skema untuk data Anda yang dapat digunakan di server dan klien, memastikan konsistensi dan keamanan tipe.

Langkah 1: Definisikan Skema Zod

Mari kita definisikan skema untuk formulir faktur kita. Ini menjadi satu-satunya sumber kebenaran untuk apa yang merupakan faktur yang valid.

            // app/lib/schemas.js
import { z } from 'zod';

export const InvoiceSchema = z.object({
  id: z.string(), // Kita akan memiliki ini untuk pembaruan, tetapi bukan pembuatan
  customerId: z.string({ invalid_type_error: 'Please select a customer.' }),
  amount: z.coerce
    .number()
    .gt(0, { message: 'Please enter an amount greater than $0.' }),
  status: z.enum(['pending', 'paid'], {
    invalid_type_error: 'Please select an invoice status.',
  }),
  date: z.string(),
});

export const CreateInvoice = InvoiceSchema.omit({ id: true, date: true });
            

              
                Copy
              
            
          

Langkah 2: Gunakan Skema di Server Action Anda

Sekarang, kita dapat mengganti semua pemeriksaan manual kita dengan satu panggilan ke skema Zod kita. Metode `safeParse` Zod akan mengembalikan data yang divalidasi atau objek error yang terperinci.

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

import { z } from 'zod';
import { CreateInvoice } from '@/app/lib/schemas';

export async function createInvoiceWithZod(prevState, formData) {
  // 1. Validasi bidang formulir menggunakan Zod
  const validatedFields = CreateInvoice.safeParse({
    customerId: formData.get('customerId'),
    amount: formData.get('amount'),
    status: formData.get('status'),
  });

  // 2. Jika validasi gagal, kembalikan error lebih awal.
  if (!validatedFields.success) {
    return {
      errors: validatedFields.error.flatten().fieldErrors,
      message: 'Missing Fields. Failed to Create Invoice.',
    };
  }

  // 3. Siapkan data untuk dimasukkan ke dalam database
  const { customerId, amount, status } = validatedFields.data;
  const amountInCents = amount * 100;
  const date = new Date().toISOString().split('T')[0];

  // 4. Masukkan data ke dalam database
  try {
    // await sql`...` kueri database Anda di sini
    console.log('Successfully created invoice with validated data.');
  } catch (error) {
    return {
      message: 'Database Error: Failed to Create Invoice.',
    };
  }

  // 5. Validasi ulang dan alihkan
  revalidatePath('/dashboard/invoices');
  redirect('/dashboard/invoices');
}
            

              
                Copy
              
            
          

Perhatikan betapa jauh lebih bersih ini. Logika validasi bersifat deklaratif dan ditempatkan bersama di file skema kita. Tanggung jawab action sekarang adalah mengatur validasi, pemrosesan data, dan interaksi database. Metode `flatten().fieldErrors` dari Zod menyediakan objek terstruktur sempurna yang memetakan nama bidang ke array pesan error, yang persis seperti yang dibutuhkan komponen formulir kita.

Praktik Terbaik Keamanan Kritis untuk Server Actions

Menggunakan pustaka validasi adalah langkah maju yang besar, tetapi keamanan sejati memerlukan pendekatan berlapis. Setiap Server Action adalah vektor serangan potensial.

1. Selalu Anggap Adanya Niat Jahat

Jangan pernah, sekali pun, mempercayai input pengguna. Ini adalah aturan emas. Bahkan jika kode sisi klien Anda mengirimkan data yang sempurna, penyerang dapat menggunakan alat seperti `curl` atau Postman untuk mengirim permintaan yang dibuat khusus langsung ke endpoint Server Action Anda. Logika sisi server Anda adalah satu-satunya pertahanan yang andal.

• Validasi Semuanya: Validasi tidak hanya formatnya tetapi juga logika bisnisnya. Apakah pengguna ini diizinkan untuk membuat faktur untuk pelanggan *ini*? Apakah jumlahnya dalam rentang yang wajar?
• Sanitasi untuk Output: Meskipun React secara otomatis melakukan escape data untuk mencegah XSS saat merender, jika Anda menggunakan data dalam konteks lain (misalnya, membuat email, logging), berhati-hatilah untuk mensanitasinya untuk mencegah injeksi skrip di sistem tersebut.

2. Autentikasi dan Otorisasi adalah Wajib

Setiap Server Action yang melakukan mutasi (buat, perbarui, hapus) atau mengakses data yang dilindungi harus memverifikasi identitas dan izin pengguna.

Selalu mulai action Anda dengan pemeriksaan sesi:

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

import { auth } from '@/auth'; // Asumsikan Anda menggunakan NextAuth.js atau yang serupa
import { sql } from '@vercel/postgres';

export async function deleteInvoice(id) {
  const session = await auth();
  if (!session?.user) {
    // Atau lempar error
    return { message: 'Authentication required.' };
  }

  // Pemeriksaan otorisasi: Apakah pengguna ini memiliki izin untuk menghapus?
  // Ini bisa melibatkan pemeriksaan peran atau kepemilikan.
  const userRole = session.user.role;
  if (userRole !== 'admin') {
    return { message: 'Unauthorized action.' };
  }

  try {
    await sql`DELETE FROM invoices WHERE id = ${id}`;
    revalidatePath('/dashboard/invoices');
    return { message: 'Deleted Invoice.' };
  } catch (error) {
    return { message: 'Database Error: Failed to Delete Invoice.' };
  }
}
            

              
                Copy
              
            
          

3. Perlindungan Terhadap CSRF (Cross-Site Request Forgery)

Serangan CSRF menipu pengguna yang sudah login untuk tanpa sadar mengirimkan permintaan berbahaya ke aplikasi Anda. Untungnya, kerangka kerja seperti Next.js memiliki perlindungan CSRF bawaan untuk Server Actions menggunakan kombinasi teknik, termasuk cookie kirim-ganda dan pemeriksaan asal. Meskipun ini ditangani untuk Anda, sangat penting untuk menyadarinya dan memastikan Anda tidak secara tidak sengaja membuat kerentanan dengan salah mengkonfigurasi pengaturan Anda.

4. Terapkan Pembatasan Laju (Rate Limiting)

Pengguna jahat atau bot dapat melakukan spam pada pengiriman formulir Anda, mencoba melakukan brute-force login, menghabiskan koneksi database Anda, atau mengisi sistem Anda dengan data sampah. Menerapkan pembatasan laju pada Server Actions yang kritis sangat penting.

Anda dapat menggunakan layanan seperti Upstash Rate Limiting atau mengimplementasikan logika Anda sendiri menggunakan penyimpanan kunci-nilai seperti Redis. Kuncinya biasanya adalah alamat IP pengguna atau ID pengguna.

            import { Ratelimit } from '@upstash/ratelimit';
import { Redis } from '@upstash/redis';

// Buat ratelimiter baru, mengizinkan 5 permintaan per 10 detik
const ratelimit = new Ratelimit({
  redis: Redis.fromEnv(),
  limiter: Ratelimit.slidingWindow(5, '10 s'),
});

export async function sensitiveAction(formData) {
  const ip = headers().get('x-forwarded-for'); // Atau dapatkan ID pengguna dari sesi
  const { success } = await ratelimit.limit(ip);

  if (!success) {
    return { message: 'Too many requests. Please try again later.' };
  }

  // ... sisa logika action
}
            

              
                Copy
              
            
          

Pertimbangan Global dan Aksesibilitas

Membangun untuk audiens global memerlukan pemikiran di luar implementasi teknis saja.

Internasionalisasi (i18n) Pesan Error

Menulis pesan error secara permanen dalam bahasa Inggris tidak ideal untuk aplikasi global. Pendekatan yang lebih baik adalah agar Server Action Anda mengembalikan *kode* atau *kunci* error.

            // Di dalam action
if (!validatedFields.success) {
  // ...
  return { errors: { customerId: ['error.customer.required'] } };
}

// Di komponen klien, menggunakan pustaka seperti 'react-i18next'
import { useTranslation } from 'react-i18next';

function MyForm() {
  const { t } = useTranslation();
  const [state, dispatch] = useFormState(...);

  // ...
  {state.errors?.customerId && 
    
{t(state.errors.customerId[0])}
}
}
            

              
                Copy
              
            
          

Ini memisahkan logika validasi Anda dari presentasi Anda dan memungkinkan front-end Anda menangani terjemahan dengan mulus.

Aksesibilitas (a11y)

Saat menampilkan error, pastikan error tersebut dapat diakses oleh pengguna teknologi bantu. Kaitkan pesan error dengan input formulir yang sesuai menggunakan atribut `aria-describedby`.

            

  Customer Name
  
  

    {state.errors?.customerName &&
      state.errors.customerName.map((error) => (
        
{error}
      ))}
  

            

              
                Copy
              
            
          

Atribut `aria-live="polite"` akan memastikan bahwa pembaca layar mengumumkan pesan error saat muncul.

Kesimpulan: Era Baru Tanggung Jawab

React Server Actions adalah alat yang kuat yang menyederhanakan pengembangan full-stack, membawa logika server lebih dekat ke UI daripada sebelumnya. Kekuatan ini, bagaimanapun, menuntut pola pikir yang disiplin dan mengutamakan keamanan.

Dengan memanfaatkan hook seperti `useFormState` dan `useFormStatus`, kita dapat membuat formulir yang ditingkatkan secara progresif dengan pengalaman pengguna yang sangat baik. Dengan mengintegrasikan pustaka validasi skema yang tangguh seperti Zod, kita dapat menulis logika validasi yang bersih, dapat dipelihara, dan aman tipe. Dan dengan mematuhi prinsip-prinsip keamanan fundamental—autentikasi, otorisasi, pembatasan laju, dan selalu memvalidasi di server—kita dapat membangun aplikasi yang tidak hanya elegan dan efisien, tetapi juga tangguh dan aman.

Perlakukan setiap Server Action sebagai endpoint API publik. Validasi inputnya, periksa izinnya, dan tangani errornya dengan baik. Dengan melakukan itu, Anda dapat dengan percaya diri memanfaatkan potensi penuh dari babak baru yang menarik dalam pengembangan React ini.