Fungsi Server

• Penggunaan
  • Membuat Fungsi Server dari Komponen Server
  • Mengimpor Fungsi Server dari Komponen Client
  • Fungsi Server dengan Aksi
  • Menggunakan Fungsi Server dengan Aksi Form
• Fungsi Server dengan useActionState
  • Peningkatan progresif dengan useActionState

Ketika sebuah Fungsi 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.

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

Penggunaan

Membuat Fungsi Server dari Komponen Server

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

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

function EmptyNote () {
  async function createNoteAction() {
    // Fungsi 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:

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

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

Mengimpor Fungsi Server dari Komponen Client

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

"use server";

export async function createNote() {
  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 {createNote} from './actions';

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

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

Fungsi Server dengan Aksi

Fungsi 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}/>
      {error && <span>Gagal: {error}</span>}
    </form>
  )
}

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

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

Menggunakan Fungsi Server dengan Aksi Form

Fungsi Server bekerja dengan fitur Formulir baru di React 19.

Anda dapat meneruskan Fungsi 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 Fungsi Server dalam Formulir.

Fungsi Server dengan useActionState

Anda dapat menggabungkan Fungsi 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 Fungsi 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

Fungsi 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.