Skip to content

Commit fbf2f25

Browse files
authored
docs: translate Server Actions (#764)
1 parent fd093ad commit fbf2f25

File tree

1 file changed

+38
-38
lines changed

1 file changed

+38
-38
lines changed

src/content/reference/rsc/server-actions.md

Lines changed: 38 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,41 @@
11
---
2-
title: Server Actions
2+
title: Aksi Server
33
canary: true
44
---
55

66
<Intro>
77

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

1010
</Intro>
1111

1212
<InlineToc />
1313

1414
<Note>
1515

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

18-
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.
18+
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.
1919

20-
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.
20+
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.
2121

2222
</Note>
2323

24-
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.
24+
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.
2525

26-
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.
26+
Aksi Server dapat dibuat di Komponen Server dan diteruskan sebagai prop ke Komponen Client, atau dapat diimpor dan digunakan di Komponen Client.
2727

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

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

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

3636
function EmptyNote () {
3737
async function createNoteAction() {
38-
// Server Action
38+
// Aksi Server
3939
'use server';
4040

4141
await db.notes.create();
@@ -45,24 +45,24 @@ function EmptyNote () {
4545
}
4646
```
4747

48-
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:
48+
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:
4949

5050
```js {5}
5151
"use client";
5252

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

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

6262

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

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

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

7474
```
7575

76-
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:
76+
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:
7777

7878
```js [[1, 2, "createNoteAction"], [1, 5, "createNoteAction"], [1, 7, "createNoteAction"]]
7979
"use client";
@@ -86,18 +86,18 @@ function EmptyNote() {
8686
}
8787
```
8888

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

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

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

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

9898
export async function updateName(name) {
9999
if (!name) {
100-
return {error: 'Name is required'};
100+
return {error: 'Nama diperlukan'};
101101
}
102102
await db.users.updateName(name);
103103
}
@@ -128,21 +128,21 @@ function UpdateName() {
128128
return (
129129
<form action={submitAction}>
130130
<input type="text" name="name" disabled={isPending}/>
131-
{state.error && <span>Failed: {state.error}</span>}
131+
{state.error && <span>Gagal: {state.error}</span>}
132132
</form>
133133
)
134134
}
135135
```
136136

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

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

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

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

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

147147

148148
```js [[1, 3, "updateName"], [1, 7, "updateName"]]
@@ -159,13 +159,13 @@ function UpdateName() {
159159
}
160160
```
161161

162-
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.
162+
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.
163163

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

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

168-
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:
168+
Anda dapat menggabungkan Aksi Server dengan `useActionState` untuk kasus umum di mana Anda hanya perlu mengakses status tertunda aksi dan respons terakhir yang dikembalikan:
169169

170170
```js [[1, 3, "updateName"], [1, 6, "updateName"], [2, 6, "submitAction"], [2, 9, "submitAction"]]
171171
"use client";
@@ -178,19 +178,19 @@ function UpdateName() {
178178
return (
179179
<form action={submitAction}>
180180
<input type="text" name="name" disabled={isPending}/>
181-
{state.error && <span>Failed: {state.error}</span>}
181+
{state.error && <span>Gagal: {state.error}</span>}
182182
</form>
183183
);
184184
}
185185
```
186186

187-
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.
187+
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.
188188

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

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

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

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

211-
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.
211+
Ketika <CodeStep step={2}>tautan permanen</CodeStep> disediakan ke `useActionState`, React akan mengalihkan ke URL yang diberikan jika formulir dikirim sebelum bundel JavaScript dimuat.
212212

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

0 commit comments

Comments
 (0)