You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/content/reference/rsc/server-functions.md
+40-44Lines changed: 40 additions & 44 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,63 +1,59 @@
1
1
---
2
-
title: Server Functions
2
+
title: Fungsi Server
3
3
---
4
4
5
5
<RSC>
6
6
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).
8
8
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.
10
10
11
11
</RSC>
12
12
13
13
<Intro>
14
14
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.
16
16
17
17
</Intro>
18
18
19
19
<InlineToc />
20
20
21
21
<Note>
22
22
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*/}
24
24
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.
26
26
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.
28
28
29
29
</Note>
30
30
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.
32
32
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.
34
34
35
-
## Usage {/*usage*/}
35
+
## Penggunaan {/*usage*/}
36
36
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*/}
38
38
39
-
Server Components can define Server Functions with the `"use server"` directive:
39
+
Komponen Server dapat mendefinisikan Fungsi Server dengan direktif `"use server"`:
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:
58
55
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:
61
57
62
58
exportdefaultfunctionButton({onClick}) {
63
59
console.log(onClick);
@@ -66,12 +62,12 @@ export default function Button({onClick}) {
66
62
}
67
63
```
68
64
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).
70
66
71
67
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*/}
73
69
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"`:
75
71
76
72
```js [[1, 3, "createNote"]]
77
73
"use server";
@@ -82,7 +78,7 @@ export async function createNote() {
82
78
83
79
```
84
80
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:
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.
147
143
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)
149
145
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*/}
151
147
152
-
Server Functions work with the new Form features in React 19.
148
+
Fungsi Server bekerja dengan fitur Formulir baru di React 19.
153
149
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:
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.
172
168
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).
174
170
175
-
### Server Functions with`useActionState` {/*server-functions-with-use-action-state*/}
171
+
##Fungsi Server dengan`useActionState` {/*server-functions-with-use-action-state*/}
176
172
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:
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.
197
193
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).
When the <CodeStepstep={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 <CodeStepstep={2}>tautan permanen</CodeStep> disediakan ke `useActionState`, React akan mengalihkan ke URL yang diberikan jika formulir dikirim sebelum bundel JavaScript dimuat.
221
217
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