React Server Actions: Panduan Komprehensif untuk Pemrosesan Formulir dan Integrasi Server

            // app/actions.js
'use server'

import { cookies } from 'next/headers'
import { revalidatePath } from 'next/cache'

export async function createPost(formData) {
  const title = formData.get('title')
  const content = formData.get('content')

  // Simulasikan penyisipan ke database
  await new Promise((resolve) => setTimeout(resolve, 1000))

  console.log('Post created:', { title, content })

  // Validasi ulang rute blog
  revalidatePath('/blog')

  return { message: 'Postingan berhasil dibuat!' }
}

            

              
                Copy
              
            
          

            // app/components/PostForm.js
import { createPost } from '../actions'
'use client'

import { useFormStatus } from 'react-dom'

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

  return (
    
      {pending ? 'Membuat...' : 'Buat Postingan'}
    
  )
}

export default function PostForm() {
  return (
    

      Judul:
      

      Konten:
      
      <SubmitButton />
    </form>
  )
}
</code>
            <div class="copy-button-container">
              <button 
                data-code="Ly8gYXBwL2NvbXBvbmVudHMvUG9zdEZvcm0uanMKaW1wb3J0IHsgY3JlYXRlUG9zdCB9IGZyb20gJy4uL2FjdGlvbnMnCid1c2UgY2xpZW50JwoKaW1wb3J0IHsgdXNlRm9ybVN0YXR1cyB9IGZyb20gJ3JlYWN0LWRvbScKCmZ1bmN0aW9uIFN1Ym1pdEJ1dHRvbigpIHsKICBjb25zdCB7IHBlbmRpbmcgfSA9IHVzZUZvcm1TdGF0dXMoKQoKICByZXR1cm4gKAogICAgPGJ1dHRvbiB0eXBlPSJzdWJtaXQiIGRpc2FibGVkPXtwZW5kaW5nfT4KICAgICAge3BlbmRpbmcgPyAnTWVtYnVhdC4uLicgOiAnQnVhdCBQb3N0aW5nYW4nfQogICAgPC9idXR0b24+CiAgKQp9CgpleHBvcnQgZGVmYXVsdCBmdW5jdGlvbiBQb3N0Rm9ybSgpIHsKICByZXR1cm4gKAogICAgPGZvcm0gYWN0aW9uPXtjcmVhdGVQb3N0fT4KICAgICAgPGxhYmVsIGh0bWxGb3I9InRpdGxlIj5KdWR1bDo8L2xhYmVsPgogICAgICA8aW5wdXQgdHlwZT0idGV4dCIgaWQ9InRpdGxlIiBuYW1lPSJ0aXRsZSIgcmVxdWlyZWQgLz4KCiAgICAgIDxsYWJlbCBodG1sRm9yPSJjb250ZW50Ij5Lb250ZW46PC9sYWJlbD4KICAgICAgPHRleHRhcmVhIGlkPSJjb250ZW50IiBuYW1lPSJjb250ZW50IiByZXF1aXJlZCAvPgoKICAgICAgPFN1Ym1pdEJ1dHRvbiAvPgogICAgPC9mb3JtPgogICkKfQo="
                class="copy-button"
                title="Copy code"
              >
                Copy
              </button>
            </div>
          </pre>
        </div>
      

<p>Dalam contoh ini:</p>

<ul>
  <li>Action <code>createPost</code> diimpor dari file <code>../actions</code>.</li>
  <li>Prop <code>action</code> dari elemen <code><form></code> diatur ke fungsi <code>createPost</code>.</li>
  <li>Komponen <code>SubmitButton</code> menggunakan hook <code>useFormStatus</code> untuk menentukan apakah formulir sedang dalam proses pengiriman. Ini menonaktifkan tombol saat formulir sedang dikirim untuk mencegah pengiriman ganda.</li>
</ul>

<h3>Menangani Data Formulir</h3>

<p>Server Actions secara otomatis menerima data formulir sebagai objek <code>FormData</code>. Anda dapat mengakses data menggunakan metode <code>get</code> dari objek <code>FormData</code>. Berikut contohnya:</p>


        <div class="code-block-wrapper">
          <pre data-language="code">
            <code>// app/actions.js
'use server'

export async function createPost(formData) {
  const title = formData.get('title')
  const content = formData.get('content')

  // ...
}
</code>
            <div class="copy-button-container">
              <button 
                data-code="Ly8gYXBwL2FjdGlvbnMuanMKJ3VzZSBzZXJ2ZXInCgpleHBvcnQgYXN5bmMgZnVuY3Rpb24gY3JlYXRlUG9zdChmb3JtRGF0YSkgewogIGNvbnN0IHRpdGxlID0gZm9ybURhdGEuZ2V0KCd0aXRsZScpCiAgY29uc3QgY29udGVudCA9IGZvcm1EYXRhLmdldCgnY29udGVudCcpCgogIC8vIC4uLgp9Cg=="
                class="copy-button"
                title="Copy code"
              >
                Copy
              </button>
            </div>
          </pre>
        </div>
      

<p>Dalam contoh ini, <code>title</code> dan <code>content</code> diekstrak dari objek <code>formData</code> menggunakan metode <code>get</code>.</p>

<h3>Memberikan Umpan Balik kepada Pengguna</h3>

<p>Anda dapat memberikan umpan balik kepada pengguna dengan mengembalikan nilai dari Server Action. Nilai ini akan tersedia untuk komponen yang memanggil action tersebut. Anda dapat menggunakan nilai ini untuk menampilkan pesan sukses atau error kepada pengguna. Berikut contohnya:</p>


        <div class="code-block-wrapper">
          <pre data-language="code">
            <code>// app/actions.js
'use server'

export async function createPost(formData) {
  // ...

  return { message: 'Postingan berhasil dibuat!' }
}
</code>
            <div class="copy-button-container">
              <button 
                data-code="Ly8gYXBwL2FjdGlvbnMuanMKJ3VzZSBzZXJ2ZXInCgpleHBvcnQgYXN5bmMgZnVuY3Rpb24gY3JlYXRlUG9zdChmb3JtRGF0YSkgewogIC8vIC4uLgoKICByZXR1cm4geyBtZXNzYWdlOiAnUG9zdGluZ2FuIGJlcmhhc2lsIGRpYnVhdCEnIH0KfQo="
                class="copy-button"
                title="Copy code"
              >
                Copy
              </button>
            </div>
          </pre>
        </div>
      


        <div class="code-block-wrapper">
          <pre data-language="code">
            <code>// app/components/PostForm.js
'use client'

import { useState } from 'react'
import { createPost } from '../actions'

export default function PostForm() {
  const [message, setMessage] = useState(null)

  async function handleSubmit(formData) {
    const result = await createPost(formData)
    setMessage(result.message)
  }

  return (
    <div>
      <form action={handleSubmit}>
        {/* ... */}
      </form>
      {message && <p>{message}</p>}
    </div>
  )
}
</code>
            <div class="copy-button-container">
              <button 
                data-code="Ly8gYXBwL2NvbXBvbmVudHMvUG9zdEZvcm0uanMKJ3VzZSBjbGllbnQnCgppbXBvcnQgeyB1c2VTdGF0ZSB9IGZyb20gJ3JlYWN0JwppbXBvcnQgeyBjcmVhdGVQb3N0IH0gZnJvbSAnLi4vYWN0aW9ucycKCmV4cG9ydCBkZWZhdWx0IGZ1bmN0aW9uIFBvc3RGb3JtKCkgewogIGNvbnN0IFttZXNzYWdlLCBzZXRNZXNzYWdlXSA9IHVzZVN0YXRlKG51bGwpCgogIGFzeW5jIGZ1bmN0aW9uIGhhbmRsZVN1Ym1pdChmb3JtRGF0YSkgewogICAgY29uc3QgcmVzdWx0ID0gYXdhaXQgY3JlYXRlUG9zdChmb3JtRGF0YSkKICAgIHNldE1lc3NhZ2UocmVzdWx0Lm1lc3NhZ2UpCiAgfQoKICByZXR1cm4gKAogICAgPGRpdj4KICAgICAgPGZvcm0gYWN0aW9uPXtoYW5kbGVTdWJtaXR9PgogICAgICAgIHsvKiAuLi4gKi99CiAgICAgIDwvZm9ybT4KICAgICAge21lc3NhZ2UgJiYgPHA+e21lc3NhZ2V9PC9wPn0KICAgIDwvZGl2PgogICkKfQo="
                class="copy-button"
                title="Copy code"
              >
                Copy
              </button>
            </div>
          </pre>
        </div>
      

<p>Dalam contoh ini:</p>

<ul>
  <li>Action <code>createPost</code> mengembalikan objek dengan properti <code>message</code>.</li>
  <li>Komponen <code>PostForm</code> menggunakan hook <code>useState</code> untuk menyimpan pesan.</li>
  <li>Fungsi <code>handleSubmit</code> memanggil action <code>createPost</code> dan mengatur state pesan ke nilai yang dikembalikan oleh action tersebut.</li>
  <li>Pesan ditampilkan kepada pengguna dalam elemen <code><p></code>.</li>
</ul>

<h3>Penanganan Kesalahan</h3>

<p>Server Actions dapat melemparkan error, yang akan ditangkap oleh runtime React. Anda dapat menangani error ini di komponen Anda dengan menggunakan blok <code>try...catch</code>. Berikut contohnya:</p>


        <div class="code-block-wrapper">
          <pre data-language="code">
            <code>// app/actions.js
'use server'

export async function createPost(formData) {
  // ...

  if (!title || title.length < 5) {
    throw new Error('Judul harus terdiri dari minimal 5 karakter.')
  }

  return { message: 'Postingan berhasil dibuat!' }
}
</code>
            <div class="copy-button-container">
              <button 
                data-code="Ly8gYXBwL2FjdGlvbnMuanMKJ3VzZSBzZXJ2ZXInCgpleHBvcnQgYXN5bmMgZnVuY3Rpb24gY3JlYXRlUG9zdChmb3JtRGF0YSkgewogIC8vIC4uLgoKICBpZiAoIXRpdGxlIHx8IHRpdGxlLmxlbmd0aCA8IDUpIHsKICAgIHRocm93IG5ldyBFcnJvcignSnVkdWwgaGFydXMgdGVyZGlyaSBkYXJpIG1pbmltYWwgNSBrYXJha3Rlci4nKQogIH0KCiAgcmV0dXJuIHsgbWVzc2FnZTogJ1Bvc3RpbmdhbiBiZXJoYXNpbCBkaWJ1YXQhJyB9Cn0K"
                class="copy-button"
                title="Copy code"
              >
                Copy
              </button>
            </div>
          </pre>
        </div>
      


        <div class="code-block-wrapper">
          <pre data-language="code">
            <code>// app/components/PostForm.js
'use client'

import { useState } from 'react'
import { createPost } from '../actions'

export default function PostForm() {
  const [message, setMessage] = useState(null)
  const [error, setError] = useState(null)

  async function handleSubmit(formData) {
    try {
      const result = await createPost(formData)
      setMessage(result.message)
      setError(null)
    } catch (e) {
      setError(e.message)
      setMessage(null)
    }
  }

  return (
    <div>
      <form action={handleSubmit}>
        {/* ... */}
      </form>
      {message && <p>{message}</p>}
      {error && <p style={{ color: 'red' }}>{error}</p>}
    </div>
  )
}
</code>
            <div class="copy-button-container">
              <button 
                data-code="Ly8gYXBwL2NvbXBvbmVudHMvUG9zdEZvcm0uanMKJ3VzZSBjbGllbnQnCgppbXBvcnQgeyB1c2VTdGF0ZSB9IGZyb20gJ3JlYWN0JwppbXBvcnQgeyBjcmVhdGVQb3N0IH0gZnJvbSAnLi4vYWN0aW9ucycKCmV4cG9ydCBkZWZhdWx0IGZ1bmN0aW9uIFBvc3RGb3JtKCkgewogIGNvbnN0IFttZXNzYWdlLCBzZXRNZXNzYWdlXSA9IHVzZVN0YXRlKG51bGwpCiAgY29uc3QgW2Vycm9yLCBzZXRFcnJvcl0gPSB1c2VTdGF0ZShudWxsKQoKICBhc3luYyBmdW5jdGlvbiBoYW5kbGVTdWJtaXQoZm9ybURhdGEpIHsKICAgIHRyeSB7CiAgICAgIGNvbnN0IHJlc3VsdCA9IGF3YWl0IGNyZWF0ZVBvc3QoZm9ybURhdGEpCiAgICAgIHNldE1lc3NhZ2UocmVzdWx0Lm1lc3NhZ2UpCiAgICAgIHNldEVycm9yKG51bGwpCiAgICB9IGNhdGNoIChlKSB7CiAgICAgIHNldEVycm9yKGUubWVzc2FnZSkKICAgICAgc2V0TWVzc2FnZShudWxsKQogICAgfQogIH0KCiAgcmV0dXJuICgKICAgIDxkaXY+CiAgICAgIDxmb3JtIGFjdGlvbj17aGFuZGxlU3VibWl0fT4KICAgICAgICB7LyogLi4uICovfQogICAgICA8L2Zvcm0+CiAgICAgIHttZXNzYWdlICYmIDxwPnttZXNzYWdlfTwvcD59CiAgICAgIHtlcnJvciAmJiA8cCBzdHlsZT17eyBjb2xvcjogJ3JlZCcgfX0+e2Vycm9yfTwvcD59CiAgICA8L2Rpdj4KICApCn0K"
                class="copy-button"
                title="Copy code"
              >
                Copy
              </button>
            </div>
          </pre>
        </div>
      

<p>Dalam contoh ini:</p>

<ul>
  <li>Action <code>createPost</code> melemparkan error jika judul kurang dari 5 karakter.</li>
  <li>Komponen <code>PostForm</code> menggunakan blok <code>try...catch</code> untuk menangkap error apa pun yang dilemparkan oleh action <code>createPost</code>.</li>
  <li>Jika error ditangkap, pesan error ditampilkan kepada pengguna dalam elemen <code><p></code> dengan teks berwarna merah.</li>
</ul>

<h2>Praktik Terbaik Menggunakan React Server Actions</h2>

<p>Untuk memastikan Anda menggunakan Server Actions secara efektif, pertimbangkan praktik terbaik berikut:</p>

<h3>Gunakan Direktif <code>'use server'</code></h3>

<p>Selalu sertakan direktif <code>'use server'</code> di bagian atas file Server Action Anda. Direktif ini memberitahu kompiler React bahwa fungsi-fungsi dalam file tersebut harus dieksekusi di server. Ini sangat penting untuk keamanan dan kinerja.</p>

<h3>Jaga Agar Actions Tetap Kecil dan Terfokus</h3>

<p>Setiap Server Action harus melakukan satu tugas tunggal yang terdefinisi dengan baik. Ini membuat actions Anda lebih mudah dipahami, diuji, dan dipelihara. Hindari membuat actions besar dan monolitik yang melakukan banyak tugas yang tidak terkait.</p>

<h3>Validasi Data di Server</h3>

<p>Selalu validasi data di server sebelum melakukan operasi apa pun. Ini melindungi aplikasi Anda dari data yang tidak valid atau berbahaya. Gunakan teknik validasi yang sesuai, seperti validasi tipe data, pemeriksaan panjang, dan ekspresi reguler. Validasi sisi server lebih aman daripada validasi sisi klien, yang dapat dilewati.</p>

<h3>Tangani Kesalahan dengan Baik</h3>

<p>Selalu tangani kesalahan dengan baik di Server Actions Anda. Ini mencegah aplikasi Anda mogok dan memberikan pengalaman pengguna yang lebih baik. Gunakan blok <code>try...catch</code> untuk menangkap pengecualian apa pun yang mungkin terjadi dan berikan pesan error yang informatif kepada pengguna.</p>

<h3>Gunakan Pembaruan Optimistis</h3>

<p>Gunakan pembaruan optimistis untuk meningkatkan responsivitas yang dirasakan dari aplikasi Anda. Segera perbarui UI untuk mencerminkan hasil yang diharapkan dari suatu action, bahkan sebelum server mengonfirmasi perubahan tersebut. Jika operasi sisi server gagal, Anda dapat dengan mudah mengembalikan UI ke keadaan sebelumnya.</p>

<h3>Pertimbangkan Caching</h3>

<p>Pertimbangkan untuk melakukan caching pada hasil Server Actions untuk meningkatkan kinerja. Ini bisa sangat bermanfaat untuk actions yang melakukan operasi mahal atau yang sering dipanggil. Gunakan strategi caching yang sesuai, seperti caching HTTP atau caching sisi server, untuk mengurangi beban pada server Anda.</p>

<h3>Amankan Server Actions Anda</h3>

<p>Terapkan langkah-langkah keamanan untuk melindungi Server Actions Anda dari akses dan manipulasi yang tidak sah. Gunakan otentikasi dan otorisasi untuk memastikan bahwa hanya pengguna yang berwenang yang dapat melakukan actions tertentu. Lindungi dari kerentanan keamanan umum, seperti cross-site scripting (XSS) dan SQL injection. Selalu bersihkan input pengguna sebelum menggunakannya dalam kueri database atau operasi sensitif lainnya.</p>

<h2>Kasus Penggunaan Umum untuk React Server Actions</h2>

<p>Server Actions sangat cocok untuk berbagai kasus penggunaan, termasuk:</p>

<h3>Pengiriman Formulir</h3>

<p>Menangani pengiriman formulir adalah salah satu kasus penggunaan paling umum untuk Server Actions. Anda dapat menggunakan Server Actions untuk memproses data formulir, memvalidasi input, dan menyimpan data di database. Ini menghilangkan kebutuhan akan endpoint API terpisah dan menyederhanakan alur kerja pengembangan Anda. Contohnya, menangani pendaftaran pengguna, formulir kontak, atau ulasan produk.</p>

<h3>Mutasi Data</h3>

<p>Server Actions dapat digunakan untuk melakukan mutasi data, seperti membuat, memperbarui, atau menghapus data di database. Ini memungkinkan Anda untuk memperbarui data aplikasi Anda sebagai respons terhadap tindakan pengguna. Contohnya termasuk memperbarui profil pengguna, menambahkan komentar, atau menghapus postingan.</p>

<h3>Otentikasi dan Otorisasi</h3>

<p>Server Actions dapat digunakan untuk menangani otentikasi dan otorisasi. Anda dapat menggunakan Server Actions untuk memverifikasi kredensial pengguna, menerbitkan token, dan melindungi sumber daya sensitif. Ini memastikan bahwa hanya pengguna yang berwenang yang dapat mengakses bagian tertentu dari aplikasi Anda. Misalnya, mengimplementasikan fungsionalitas login/logout, mengelola peran pengguna, atau mengotorisasi akses ke fitur tertentu.</p>

<h3>Pembaruan Real-time</h3>

<p>Meskipun Server Actions tidak bersifat real-time secara inheren, fitur ini dapat digabungkan dengan teknologi lain, seperti WebSockets, untuk menyediakan pembaruan real-time ke aplikasi Anda. Anda dapat menggunakan Server Actions untuk memicu peristiwa yang kemudian disiarkan ke klien yang terhubung melalui WebSockets. Pikirkan aplikasi obrolan langsung, pengeditan dokumen kolaboratif, atau dasbor real-time.</p>

<h2>Pertimbangan Internasionalisasi (i18n)</h2>

<p>Saat mengembangkan aplikasi dengan Server Actions untuk audiens global, internasionalisasi (i18n) sangat penting. Berikut adalah beberapa pertimbangan utama:</p>

<h3>Lokalisasi Pesan Kesalahan</h3>

<p>Pastikan bahwa pesan kesalahan yang dikembalikan oleh Server Actions dilokalkan ke bahasa pilihan pengguna. Ini memberikan pengalaman pengguna yang lebih baik dan memudahkan pengguna untuk memahami dan menyelesaikan masalah apa pun. Gunakan pustaka i18n untuk mengelola terjemahan dan menampilkan pesan secara dinamis berdasarkan lokal pengguna.</p>

<h3>Pemformatan Tanggal dan Angka</h3>

<p>Format tanggal dan angka sesuai dengan lokal pengguna. Lokal yang berbeda memiliki konvensi yang berbeda untuk menampilkan tanggal, angka, dan mata uang. Gunakan pustaka i18n untuk memformat nilai-nilai ini dengan benar berdasarkan lokal pengguna.</p>

<h3>Penanganan Zona Waktu</h3>

<p>Saat berurusan dengan tanggal dan waktu, perhatikan zona waktu. Simpan tanggal dan waktu dalam format UTC dan konversikan ke zona waktu lokal pengguna saat menampilkannya. Ini memastikan bahwa tanggal dan waktu ditampilkan dengan benar terlepas dari lokasi pengguna. Misalnya, menjadwalkan acara atau menampilkan stempel waktu.</p>

<h3>Konversi Mata Uang</h3>

<p>Jika aplikasi Anda berurusan dengan mata uang, sediakan fungsionalitas konversi mata uang. Izinkan pengguna untuk melihat harga dalam mata uang lokal mereka. Gunakan API konversi mata uang yang andal untuk memastikan bahwa nilai tukar selalu terbaru. Ini sangat penting untuk aplikasi e-commerce dan layanan keuangan.</p>

<h3>Dukungan Kanan-ke-Kiri (RTL)</h3>

<p>Jika aplikasi Anda mendukung bahasa yang ditulis dari kanan ke kiri (RTL), seperti Arab atau Ibrani, pastikan UI Anda dicerminkan dengan benar untuk bahasa-bahasa ini. Ini termasuk mencerminkan tata letak, arah teks, dan ikon. Gunakan properti logis CSS untuk membuat tata letak yang beradaptasi dengan arah teks yang berbeda.</p>

<h2>Contoh React Server Actions dalam Aplikasi Global</h2>

<p>Berikut adalah beberapa contoh bagaimana React Server Actions dapat digunakan dalam aplikasi global:</p>

<h3>Platform E-commerce</h3>

<ul>
  <li><b>Menambahkan produk ke keranjang:</b> Server Action dapat digunakan untuk menambahkan produk ke keranjang belanja pengguna. Action ini dapat memvalidasi ID produk, memeriksa tingkat inventaris, dan memperbarui keranjang di database.</li>
  <li><b>Memproses pesanan:</b> Server Action dapat digunakan untuk memproses pesanan. Action ini dapat memvalidasi informasi pembayaran pengguna, menghitung biaya pengiriman, dan membuat pesanan di database.</li>
  <li><b>Berlangganan buletin:</b> Server Action dapat menangani langganan buletin, memvalidasi alamat email, dan menambahkannya ke daftar langganan.</li>
</ul>

<h3>Platform Media Sosial</h3>

<ul>
  <li><b>Memposting komentar:</b> Server Action dapat digunakan untuk memposting komentar pada sebuah postingan. Action ini dapat memvalidasi teks komentar, mengaitkannya dengan postingan, dan menyimpannya di database.</li>
  <li><b>Menyukai postingan:</b> Server Action dapat digunakan untuk menyukai postingan. Action ini dapat memperbarui jumlah suka untuk postingan tersebut dan menyimpan suka di database.</li>
  <li><b>Mengikuti pengguna:</b> Server Actions dapat mengelola permintaan pertemanan, menangani pemblokiran pengguna, dan memperbarui jumlah pengikut.</li>
</ul>

<h3>Aplikasi Pemesanan Perjalanan</h3>

<ul>
  <li><b>Mencari penerbangan:</b> Server Actions dapat digunakan untuk menanyakan ketersediaan penerbangan berdasarkan tujuan dan tanggal. Action ini dapat memanggil API eksternal, menyaring hasil, dan menyajikan opsi kepada pengguna.</li>
  <li><b>Memesan kamar hotel:</b> Server Actions dapat menangani pemesanan hotel, mengonfirmasi ketersediaan kamar, dan memproses detail pembayaran.</li>
  <li><b>Memberi ulasan destinasi perjalanan:</b> Server action dapat menangani penambahan dan pemrosesan ulasan dan peringkat pengguna.</li>
</ul>

<h2>React Server Components vs. Server Actions</h2>

<p>Penting untuk memahami perbedaan antara React Server Components dan Server Actions, karena keduanya sering bekerja bersama tetapi memiliki tujuan yang berbeda:</p>

<h3>React Server Components</h3>

<p>React Server Components adalah komponen yang dirender di server. Mereka memungkinkan Anda untuk mengambil data, melakukan logika, dan merender elemen UI di server, yang dapat meningkatkan kinerja dan mengurangi jumlah JavaScript yang perlu diunduh dan dieksekusi di klien. Server Components terutama untuk merender UI dan mengambil data awal.</p>

<h3>Server Actions</h3>

<p>Server Actions adalah fungsi asinkron yang berjalan di server sebagai respons terhadap interaksi pengguna, seperti pengiriman formulir. Mereka terutama untuk menangani mutasi data, melakukan logika sisi server, dan memberikan umpan balik kepada pengguna. Server Actions dipanggil dari komponen klien, biasanya sebagai respons terhadap pengiriman formulir atau peristiwa pengguna lainnya.</p>

<p><b>Perbedaan Utama:</b></p>

<ul>
  <li><b>Tujuan:</b> Server Components untuk merender UI, sedangkan Server Actions untuk menangani mutasi data.</li>
  <li><b>Eksekusi:</b> Server Components dirender di server selama pemuatan halaman awal, sedangkan Server Actions dipanggil dari komponen klien sebagai respons terhadap interaksi pengguna.</li>
  <li><b>Aliran Data:</b> Server Components dapat mengambil data langsung dari server, sedangkan Server Actions menerima data dari klien melalui pengiriman formulir atau peristiwa pengguna lainnya.</li>
</ul>

<p><b>Bagaimana Keduanya Bekerja Sama:</b></p>

<p>Server Components dan Server Actions dapat digunakan bersama untuk membangun aplikasi web interaktif. Server Components dapat merender UI awal dan mengambil data awal, sedangkan Server Actions dapat menangani mutasi data dan memberikan umpan balik kepada pengguna. Misalnya, Server Component dapat merender formulir, dan Server Action dapat menangani pengiriman formulir dan memperbarui data di database.</p>

<h2>Kesimpulan</h2>

<p>React Server Actions menawarkan cara yang kuat dan efisien untuk menangani pemrosesan formulir, mutasi data, dan operasi sisi server lainnya di aplikasi React Anda. Dengan memanfaatkan Server Actions, Anda dapat menyederhanakan alur kerja pengembangan, meningkatkan kinerja aplikasi, meningkatkan keamanan, dan memberikan pengalaman pengguna yang lebih baik. Seiring Anda membangun aplikasi web yang semakin kompleks, memahami dan memanfaatkan React Server Actions akan menjadi keterampilan penting bagi pengembang React modern.</p>

<p>Ingatlah untuk mengikuti praktik terbaik yang diuraikan dalam panduan ini untuk memastikan bahwa Anda menggunakan Server Actions secara efektif dan aman. Dengan merangkul Server Actions, Anda dapat membuka potensi penuh React dan membangun aplikasi web berkinerja tinggi dan ramah pengguna untuk audiens global.</p></div><footer class="mt-12 pt-8 border-t border-gray-200"><h3 class="text-sm font-semibold text-gray-900 mb-3 dark:text-white/90">Tags:</h3><div class="flex flex-wrap gap-2"><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">React Server Actions</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">komponen server</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">pemrosesan formulir</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">rendering sisi server</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">mutasi data</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">kerangka kerja React</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">pengembangan web</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">pengambilan data</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">integrasi server</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">peningkatan progresif</span></div></footer></article></div><script>$RS=function(a,b){a=document.getElementById(a);b=document.getElementById(b);for(a.parentNode.removeChild(a);a.firstChild;)b.parentNode.insertBefore(a.firstChild,b);b.parentNode.removeChild(b)};$RS("S:2","P:2")</script><script>$RB=[];$RV=function(b){$RT=performance.now();for(var a=0;a<b.length;a+=2){var c=b[a],e=b[a+1];null!==e.parentNode&&e.parentNode.removeChild(e);var f=c.parentNode;if(f){var g=c.previousSibling,h=0;do{if(c&&8===c.nodeType){var d=c.data;if("/$"===d||"/&"===d)if(0===h)break;else h--;else"$"!==d&&"$?"!==d&&"$~"!==d&&"$!"!==d&&"&"!==d||h++}d=c.nextSibling;f.removeChild(c);c=d}while(c);for(;e.firstChild;)f.insertBefore(e.firstChild,c);g.data="$";g._reactRetry&&g._reactRetry()}}b.length=0};
$RC=function(b,a){if(a=document.getElementById(a))(b=document.getElementById(b))?(b.previousSibling.data="$~",$RB.push(b,a),2===$RB.length&&(b="number"!==typeof $RT?0:$RT,a=performance.now(),setTimeout($RV.bind(null,$RB),2300>a&&2E3<a?2300-a:b+300-a))):a.parentNode.removeChild(a)};$RC("B:1","S:1")</script><div hidden id="S:3"></div><script>$RC("B:3","S:3")</script><div hidden id="S:0"></div><script>$RC("B:0","S:0")</script></body></html>