Skip to content

docs: translate Server Actions #764

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jun 16, 2025
Merged

docs: translate Server Actions #764

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
76 changes: 38 additions & 38 deletions src/content/reference/rsc/server-actions.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,41 +1,41 @@
---
title: Server Actions
title: Aksi Server
canary: true
---

<Intro>

Server Actions allow Client Components to call async functions executed on the server.
Aksi Server memungkinkan Komponen Client memanggil fungsi async yang dijalankan di server.

</Intro>

<InlineToc />

<Note>

#### How do I build support for Server Actions? {/*how-do-i-build-support-for-server-actions*/}
#### Bagaimana cara membangun dukungan untuk Aksi Server? {/*how-do-i-build-support-for-server-actions*/}

While Server Actions in React 19 are stable and will not break between major versions, the underlying APIs used to implement Server Actions in a React Server Components bundler or framework do not follow semver and may break between minors in React 19.x.
Meskipun Aksi Server di React 19 sudah stabil dan tidak akan rusak antar versi mayor, API dasar yang digunakan untuk mengimplementasikan Aksi Server di bundler atau framework React Server Components tidak mengikuti semver dan dapat berubah antar versi minor di React 19.x.

To support Server Actions as a bundler or framework, we recommend pinning to a specific React version, or using the Canary release. We will continue working with bundlers and frameworks to stabilize the APIs used to implement Server Actions in the future.
Untuk mendukung Aksi Server sebagai bundler atau framework, kami merekomendasikan untuk mengunci ke versi React tertentu, atau menggunakan rilis Canary. Kami akan terus bekerja sama dengan bundler dan framework untuk menstabilkan API yang digunakan untuk mengimplementasikan Aksi Server di masa mendatang.

</Note>

When a Server Action is defined with the `"use server"` directive, your framework will automatically create a reference to the server function, and pass that reference to the Client Component. When that function is called on the client, React will send a request to the server to execute the function, and return the result.
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.

Server Actions can be created in Server Components and passed as props to Client Components, or they can be imported and used in Client Components.
Aksi Server dapat dibuat di Komponen Server dan diteruskan sebagai prop ke Komponen Client, atau dapat diimpor dan digunakan di Komponen Client.

### Creating a Server Action from a Server Component {/*creating-a-server-action-from-a-server-component*/}
### Membuat Aksi Server dari Komponen Server {/*creating-a-server-action-from-a-server-component*/}

Server Components can define Server Actions with the `"use server"` directive:
Komponen Server dapat mendefinisikan Aksi Server dengan direktif `"use server"`:

```js [[2, 7, "'use server'"], [1, 5, "createNoteAction"], [1, 12, "createNoteAction"]]
// Server Component
// Komponen Server
import Button from './Button';

function EmptyNote () {
async function createNoteAction() {
// Server Action
// Aksi Server
'use server';

await db.notes.create();
Expand All @@ -45,24 +45,24 @@ function EmptyNote () {
}
```

When React renders the `EmptyNote` Server Component, it will create a reference to the `createNoteAction` function, and pass that reference to the `Button` Client Component. When the button is clicked, React will send a request to the server to execute the `createNoteAction` function with the reference provided:
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:

```js {5}
"use client";

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

For more, see the docs for [`"use server"`](/reference/rsc/use-server).
Untuk lebih jelasnya, lihat dokumen tentang [`"use server"`](/reference/rsc/use-server).


### Importing Server Actions from Client Components {/*importing-server-actions-from-client-components*/}
### Mengimpor Aksi Server dari Komponen Client {/*importing-server-actions-from-client-components*/}

Client Components can import Server Actions from files that use the `"use server"` directive:
Komponen Client dapat mengimpor Aksi Server dari file yang menggunakan direktif `"use server"`:

```js [[1, 3, "createNoteAction"]]
"use server";
Expand All @@ -73,7 +73,7 @@ export async function createNoteAction() {

```

When the bundler builds the `EmptyNote` Client Component, it will create a reference to the `createNoteAction` function in the bundle. When the `button` is clicked, React will send a request to the server to execute the `createNoteAction` function using the reference provided:
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:

```js [[1, 2, "createNoteAction"], [1, 5, "createNoteAction"], [1, 7, "createNoteAction"]]
"use client";
Expand All @@ -86,18 +86,18 @@ function EmptyNote() {
}
```

For more, see the docs for [`"use server"`](/reference/rsc/use-server).
Untuk lebih jelasnya, lihat dokumen tentang [`"use server"`](/reference/rsc/use-server).

### Composing Server Actions with Actions {/*composing-server-actions-with-actions*/}
### Menggabungkan Aksi Server dengan Aksi {/*composing-server-actions-with-actions*/}

Server Actions can be composed with Actions on the client:
Aksi Server dapat digabungkan dengan Aksi di klien:

```js [[1, 3, "updateName"]]
"use server";

export async function updateName(name) {
if (!name) {
return {error: 'Name is required'};
return {error: 'Nama diperlukan'};
}
await db.users.updateName(name);
}
Expand Down Expand Up @@ -128,21 +128,21 @@ function UpdateName() {
return (
<form action={submitAction}>
<input type="text" name="name" disabled={isPending}/>
{state.error && <span>Failed: {state.error}</span>}
{state.error && <span>Gagal: {state.error}</span>}
</form>
)
}
```

This allows you to access the `isPending` state of the Server Action by wrapping it in an Action on the client.
Ini memungkinkan Anda mengakses status `isPending` dari Aksi Server dengan membungkusnya dalam Aksi di klien.

For more, see the docs for [Calling a Server Action outside of `<form>`](/reference/rsc/use-server#calling-a-server-action-outside-of-form)
Untuk lebih jelasnya, lihat dokumen tentang [Memanggil Aksi Server di luar `<form>`](/reference/rsc/use-server#calling-a-server-action-outside-of-form)

### Form Actions with Server Actions {/*form-actions-with-server-actions*/}
### Aksi Form dengan Aksi Server {/*form-actions-with-server-actions*/}

Server Actions work with the new Form features in React 19.
Aksi Server bekerja dengan fitur Formulir baru di React 19.

You can pass a Server Action to a Form to automatically submit the form to the server:
Anda dapat meneruskan Aksi Server ke Formulir untuk secara otomatis mengirim formulir ke server:


```js [[1, 3, "updateName"], [1, 7, "updateName"]]
Expand All @@ -159,13 +159,13 @@ function UpdateName() {
}
```

When the Form submission succeeds, React will automatically reset the form. You can add `useActionState` to access the pending state, last response, or to support progressive enhancement.
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.

For more, see the docs for [Server Actions in Forms](/reference/rsc/use-server#server-actions-in-forms).
Untuk lebih jelasnya, lihat dokumen tentang [Aksi Server dalam Formulir](/reference/rsc/use-server#server-actions-in-forms).

### Server Actions with `useActionState` {/*server-actions-with-use-action-state*/}
### Aksi Server dengan `useActionState` {/*server-actions-with-use-action-state*/}

You can compose Server Actions with `useActionState` for the common case where you just need access to the action pending state and last returned response:
Anda dapat menggabungkan Aksi Server dengan `useActionState` untuk kasus umum di mana Anda hanya perlu mengakses status tertunda aksi dan respons terakhir yang dikembalikan:

```js [[1, 3, "updateName"], [1, 6, "updateName"], [2, 6, "submitAction"], [2, 9, "submitAction"]]
"use client";
Expand All @@ -178,19 +178,19 @@ function UpdateName() {
return (
<form action={submitAction}>
<input type="text" name="name" disabled={isPending}/>
{state.error && <span>Failed: {state.error}</span>}
{state.error && <span>Gagal: {state.error}</span>}
</form>
);
}
```

When using `useActionState` with Server Actions, React will also automatically replay form submissions entered before hydration finishes. This means users can interact with your app even before the app has hydrated.
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.

For more, see the docs for [`useActionState`](/reference/react-dom/hooks/useFormState).
Untuk lebih jelasnya, lihat dokumen tentang [`useActionState`](/reference/react-dom/hooks/useFormState).

### Progressive enhancement with `useActionState` {/*progressive-enhancement-with-useactionstate*/}
### Peningkatan progresif dengan `useActionState` {/*progressive-enhancement-with-useactionstate*/}

Server Actions also support progressive enhancement with the third argument of `useActionState`.
Aksi Server juga mendukung peningkatan progresif dengan argumen ketiga dari `useActionState`.

```js [[1, 3, "updateName"], [1, 6, "updateName"], [2, 6, "/name/update"], [3, 6, "submitAction"], [3, 9, "submitAction"]]
"use client";
Expand All @@ -208,6 +208,6 @@ function UpdateName() {
}
```

When the <CodeStep step={2}>permalink</CodeStep> is provided to `useActionState`, React will redirect to the provided URL if the form is submitted before the JavaScript bundle loads.
Ketika <CodeStep step={2}>tautan permanen</CodeStep> disediakan ke `useActionState`, React akan mengalihkan ke URL yang diberikan jika formulir dikirim sebelum bundel JavaScript dimuat.

For more, see the docs for [`useActionState`](/reference/react-dom/hooks/useFormState).
Untuk lebih jelasnya, lihat dokumen tentang [`useActionState`](/reference/react-dom/hooks/useFormState).