Skip to content

Commit bc605d1

Browse files
committed
Merge branch 'main' into sync-50d6991c
2 parents d38e359 + fbf2f25 commit bc605d1

File tree

1 file changed

+40
-44
lines changed

1 file changed

+40
-44
lines changed

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

Lines changed: 40 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,63 +1,59 @@
11
---
2-
title: Server Functions
2+
title: Fungsi Server
33
---
44

55
<RSC>
66

7-
Server Functions are for use in [React Server Components](/reference/rsc/server-components).
7+
Fungsi Server digunakan di [Komponen Server React](/reference/rsc/server-components).
88

9-
**Note:** Until September 2024, we referred to all Server Functions as "Server Actions". If a Server Function is passed to an action prop or called from inside an action then it is a Server Action, but not all Server Functions are Server Actions. The naming in this documentation has been updated to reflect that Server Functions can be used for multiple purposes.
9+
**Catatan:** Hingga September 2024, kami menyebut semua Fungsi Server sebagai "Aksi Server". Jika Fungsi Server diteruskan ke *prop action* atau dipanggil dari dalam suatu aksi, maka itu adalah Aksi Server, tetapi tidak semua Fungsi Server adalah Aksi Server. Penamaan dalam dokumentasi ini telah diperbarui untuk mencerminkan bahwa Fungsi Server dapat digunakan untuk berbagai tujuan.
1010

1111
</RSC>
1212

1313
<Intro>
1414

15-
Server Functions allow Client Components to call async functions executed on the server.
15+
Fungsi Server memungkinkan Komponen Klien memanggil fungsi async yang dijalankan di server.
1616

1717
</Intro>
1818

1919
<InlineToc />
2020

2121
<Note>
2222

23-
#### How do I build support for Server Functions? {/*how-do-i-build-support-for-server-functions*/}
23+
#### Bagaimana cara membangun dukungan untuk Fungsi Server? {/*how-do-i-build-support-for-server-functions*/}
2424

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

27-
To support Server Functions 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 Functions in the future.
27+
Untuk mendukung Fungsi 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 Fungsi Server di masa mendatang.
2828

2929
</Note>
3030

31-
When a Server Function is defined with the [`"use server"`](/reference/rsc/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.
31+
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.
3232

33-
Server Functions can be created in Server Components and passed as props to Client Components, or they can be imported and used in Client Components.
33+
Fungsi Server dapat dibuat di Komponen Server dan diteruskan sebagai prop ke Komponen Client, atau dapat diimpor dan digunakan di Komponen Client.
3434

35-
## Usage {/*usage*/}
35+
## Penggunaan {/*usage*/}
3636

37-
### Creating a Server Function from a Server Component {/*creating-a-server-function-from-a-server-component*/}
37+
### Membuat Fungsi Server dari Komponen Server {/*creating-a-server-function-from-a-server-component*/}
3838

39-
Server Components can define Server Functions with the `"use server"` directive:
39+
Komponen Server dapat mendefinisikan Fungsi Server dengan direktif `"use server"`:
4040

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

4545
function EmptyNote () {
4646
async function createNoteAction() {
47-
// Server Function
47+
// Fungsi Server
4848
'use server';
4949

5050
await db.notes.create();
5151
}
5252

5353
return <Button onClick={createNoteAction}/>;
5454
}
55-
```
56-
57-
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:
5855

59-
```js {5}
60-
"use client";
56+
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:
6157

6258
export default function Button({onClick}) {
6359
console.log(onClick);
@@ -66,12 +62,12 @@ export default function Button({onClick}) {
6662
}
6763
```
6864

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

7167

72-
### Importing Server Functions from Client Components {/*importing-server-functions-from-client-components*/}
68+
### Mengimpor Fungsi Server dari Komponen Client {/*importing-server-functions-from-client-components*/}
7369

74-
Client Components can import Server Functions from files that use the `"use server"` directive:
70+
Komponen Client dapat mengimpor Fungsi Server dari file yang menggunakan direktif `"use server"`:
7571

7672
```js [[1, 3, "createNote"]]
7773
"use server";
@@ -82,7 +78,7 @@ export async function createNote() {
8278

8379
```
8480

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

8783
```js [[1, 2, "createNote"], [1, 5, "createNote"], [1, 7, "createNote"]]
8884
"use client";
@@ -95,18 +91,18 @@ function EmptyNote() {
9591
}
9692
```
9793

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

100-
### Server Functions with Actions {/*server-functions-with-actions*/}
96+
### Fungsi Server dengan Aksi {/*server-functions-with-actions*/}
10197

102-
Server Functions can be called from Actions on the client:
98+
Fungsi Server dapat digabungkan dengan Aksi di klien:
10399

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

107103
export async function updateName(name) {
108104
if (!name) {
109-
return {error: 'Name is required'};
105+
return {error: 'Nama diperlukan'};
110106
}
111107
await db.users.updateName(name);
112108
}
@@ -137,21 +133,21 @@ function UpdateName() {
137133
return (
138134
<form action={submitAction}>
139135
<input type="text" name="name" disabled={isPending}/>
140-
{error && <span>Failed: {error}</span>}
136+
{error && <span>Gagal: {error}</span>}
141137
</form>
142138
)
143139
}
144140
```
145141

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

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

150-
### Server Functions with Form Actions {/*using-server-functions-with-form-actions*/}
146+
### Menggunakan Fungsi Server dengan Aksi Form {/*using-server-functions-with-form-actions*/}
151147

152-
Server Functions work with the new Form features in React 19.
148+
Fungsi Server bekerja dengan fitur Formulir baru di React 19.
153149

154-
You can pass a Server Function to a Form to automatically submit the form to the server:
150+
Anda dapat meneruskan Fungsi Server ke Formulir untuk secara otomatis mengirim formulir ke server:
155151

156152

157153
```js [[1, 3, "updateName"], [1, 7, "updateName"]]
@@ -168,13 +164,13 @@ function UpdateName() {
168164
}
169165
```
170166

171-
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.
167+
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.
172168

173-
For more, see the docs for [Server Functions in Forms](/reference/rsc/use-server#server-functions-in-forms).
169+
Untuk lebih jelasnya, lihat dokumen tentang [Fungsi Server dalam Formulir](/reference/rsc/use-server#server-actions-in-forms).
174170

175-
### Server Functions with `useActionState` {/*server-functions-with-use-action-state*/}
171+
## Fungsi Server dengan `useActionState` {/*server-functions-with-use-action-state*/}
176172

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

179175
```js [[1, 3, "updateName"], [1, 6, "updateName"], [2, 6, "submitAction"], [2, 9, "submitAction"]]
180176
"use client";
@@ -187,19 +183,19 @@ function UpdateName() {
187183
return (
188184
<form action={submitAction}>
189185
<input type="text" name="name" disabled={isPending}/>
190-
{state.error && <span>Failed: {state.error}</span>}
186+
{state.error && <span>Gagal: {state.error}</span>}
191187
</form>
192188
);
193189
}
194190
```
195191

196-
When using `useActionState` with Server Functions, 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.
192+
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.
197193

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

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

202-
Server Functions also support progressive enhancement with the third argument of `useActionState`.
198+
Fungsi Server juga mendukung peningkatan progresif dengan argumen ketiga dari `useActionState`.
203199

204200
```js [[1, 3, "updateName"], [1, 6, "updateName"], [2, 6, "/name/update"], [3, 6, "submitAction"], [3, 9, "submitAction"]]
205201
"use client";
@@ -217,6 +213,6 @@ function UpdateName() {
217213
}
218214
```
219215

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

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

0 commit comments

Comments
 (0)