Aksi Server

• Membuat Aksi Server dari Komponen Server
• Mengimpor Aksi Server dari Komponen Client
• Menggabungkan Aksi Server dengan Aksi
• Aksi Form dengan Aksi Server
• Aksi Server dengan useActionState
• Peningkatan progresif dengan useActionState

Ketika sebuah Aksi Server didefinisikan dengan direktif "use server", framework Anda akan secara otomatis membuat referensi ke fungsi server, dan meneruskan referensi tersebut ke Komponen Client. Ketika fungsi itu dipanggil di client, React akan mengirim permintaan ke server untuk mengeksekusi fungsi tersebut, dan mengembalikan hasilnya.

Aksi Server dapat dibuat di Komponen Server dan diteruskan sebagai prop ke Komponen Client, atau dapat diimpor dan digunakan di Komponen Client.

Membuat Aksi Server dari Komponen Server

Komponen Server dapat mendefinisikan Aksi Server dengan direktif "use server":

// Komponen Server
import Button from './Button';

function EmptyNote () {
  async function createNoteAction() {
    // Aksi Server
    'use server';
    
    await db.notes.create();
  }

  return <Button onClick={createNoteAction}/>;
}

Ketika React merender Komponen Server EmptyNote, ia akan membuat referensi ke fungsi createNoteAction, dan meneruskan referensi itu ke Komponen Client Button. Ketika tombol diklik, React akan mengirim permintaan ke server untuk mengeksekusi fungsi createNoteAction dengan referensi yang diberikan:

"use client";

export default function Button({onClick}) { 
  console.log(onClick); 
  // {$$typeof: Symbol.for("react.server.reference"), $$id: 'createNoteAction'}
  return <button onClick={onClick}>Buat Catatan Kosong</button>
}

Untuk lebih jelasnya, lihat dokumen tentang "use server".

Mengimpor Aksi Server dari Komponen Client

Komponen Client dapat mengimpor Aksi Server dari file yang menggunakan direktif "use server":

"use server";

export async function createNoteAction() {
  await db.notes.create();
}

Ketika bundler membangun Komponen Client EmptyNote, ia akan membuat referensi ke fungsi createNoteAction dalam bundle. Ketika button diklik, React akan mengirim permintaan ke server untuk mengeksekusi fungsi createNoteAction menggunakan referensi yang diberikan:

"use client";
import {createNoteAction} from './actions';

function EmptyNote() {
  console.log(createNoteAction);
  // {$$typeof: Symbol.for("react.server.reference"), $$id: 'createNoteAction'}
  <button onClick={createNoteAction} />
}

Untuk lebih jelasnya, lihat dokumen tentang "use server".

Menggabungkan Aksi Server dengan Aksi

Aksi Server dapat digabungkan dengan Aksi di klien:

"use server";

export async function updateName(name) {
  if (!name) {
    return {error: 'Nama diperlukan'};
  }
  await db.users.updateName(name);
}

"use client";

import {updateName} from './actions';

function UpdateName() {
  const [name, setName] = useState('');
  const [error, setError] = useState(null);

  const [isPending, startTransition] = useTransition();

  const submitAction = async () => {
    startTransition(async () => {
      const {error} = await updateName(name);
      if (!error) {
        setError(error);
      } else {
        setName('');
      }
    })
  }
  
  return (
    <form action={submitAction}>
      <input type="text" name="name" disabled={isPending}/>
      {state.error && <span>Gagal: {state.error}</span>}
    </form>
  )
}

Ini memungkinkan Anda mengakses status isPending dari Aksi Server dengan membungkusnya dalam Aksi di klien.

Untuk lebih jelasnya, lihat dokumen tentang Memanggil Aksi Server di luar <form>

Aksi Form dengan Aksi Server

Aksi Server bekerja dengan fitur Formulir baru di React 19.

Anda dapat meneruskan Aksi Server ke Formulir untuk secara otomatis mengirim formulir ke server:

"use client";

import {updateName} from './actions';

function UpdateName() {
  return (
    <form action={updateName}>
      <input type="text" name="name" />
    </form>
  )
}

Ketika pengiriman Formulir berhasil, React secara otomatis akan mereset formulir. Anda dapat menambahkan useActionState untuk mengakses status tertunda, respons terakhir, atau untuk mendukung peningkatan progresif.

Untuk lebih jelasnya, lihat dokumen tentang Aksi Server dalam Formulir.

Aksi Server dengan useActionState

Anda dapat menggabungkan Aksi Server dengan useActionState untuk kasus umum di mana Anda hanya perlu mengakses status tertunda aksi dan respons terakhir yang dikembalikan:

"use client";

import {updateName} from './actions';

function UpdateName() {
  const [state, submitAction, isPending] = useActionState(updateName, {error: null});

  return (
    <form action={submitAction}>
      <input type="text" name="name" disabled={isPending}/>
      {state.error && <span>Gagal: {state.error}</span>}
    </form>
  );
}

Saat menggunakan useActionState dengan Aksi Server, React juga secara otomatis akan memutar ulang pengiriman formulir yang dimasukkan sebelum hidrasi selesai. Ini berarti pengguna dapat berinteraksi dengan aplikasi Anda bahkan sebelum aplikasi terhidrasi.

Untuk lebih jelasnya, lihat dokumen tentang useActionState.

Peningkatan progresif dengan useActionState

Aksi Server juga mendukung peningkatan progresif dengan argumen ketiga dari useActionState.

"use client";

import {updateName} from './actions';

function UpdateName() {
  const [, submitAction] = useActionState(updateName, null, `/name/update`);

  return (
    <form action={submitAction}>
      ...
    </form>
  );
}

Ketika tautan permanen disediakan ke useActionState, React akan mengalihkan ke URL yang diberikan jika formulir dikirim sebelum bundel JavaScript dimuat.

Untuk lebih jelasnya, lihat dokumen tentang useActionState.