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
+34-34Lines changed: 34 additions & 34 deletions
Original file line number
Diff line number
Diff line change
@@ -4,39 +4,39 @@ title: Server Functions
4
4
5
5
<RSC>
6
6
7
-
Server Functions are for use in[React Server Components](/learn/start-a-new-react-project#bleeding-edge-react-frameworks).
7
+
Las Server Functions son para usarse en[React Server Components](/learn/start-a-new-react-project#bleeding-edge-react-frameworks).
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
+
**Nota:**Hasta Septiembre de 2024, nos referíamos a todas las Server Functions como “Server Actions”. Si una Server Function se pasa a una propiedad de acción o se llama desde dentro de una acción, entonces es una Server Action, pero no todas las Server Functions son Server Actions. La nomenclatura en esta documentación ha sido actualizada para reflejar que las Server Functions pueden ser usadas para múltiples propósitos.
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
+
Las Server Functions permiten a los Client Components llamar a funciones asíncronas ejecutadas en el servidor.
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
+
#### ¿Cómo se crea la compatibilidad con las Server Functions? {/*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
+
Mientras que las Server Functions en React 19 son estables y no se romperán entre versiones menores, las APIs subyacentes utilizadas para implementar Server Functions en un bundler o framework de React Server Components no siguen un versionado semántico y pueden romperse entre versiones menores en 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
+
Para soportar Server Functions como bundler o framework, recomendamos usar una versión específica de React, o usar la versión Canary. Seguiremos trabajando con bundlers y frameworks para estabilizar las API utilizadas para implementar Server Functions en el futuro.
28
28
29
29
</Note>
30
30
31
-
When a Server Functions 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
+
Cuando se define una Server Function con la directiva [`"use server"`](/reference/rsc/use-server), tu framework creará automáticamente una referencia a la Server Function, y pasará esa referencia al Client Component. Cuando esa función es llamada en el cliente, React enviará una petición al servidor para ejecutar la función, y devolver el resultado.
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
+
Las Server Functions pueden crearse en Server Components y pasarse como props a los Client Components, o pueden importarse y utilizarse en Client Components.
34
34
35
-
## Usage {/*usage*/}
35
+
## Uso {/*usage*/}
36
36
37
-
### Creating a Server Function from a Server Component {/*creating-a-server-function-from-a-server-component*/}
37
+
### Creación de una Server Function a partir de un Server Component {/*creating-a-server-function-from-a-server-component*/}
38
38
39
-
Server Components can define Server Functions with the `"use server"` directive:
39
+
Los Server Components pueden definir Server Functions con la directiva `"use server"`:
When React renders the `EmptyNote`Server Function, 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:
57
+
Cuando React renderiza la Server Function`EmptyNote`, creará una referencia a la función `createNoteAction`, y pasará esa referencia al Client Component `Button`. Cuando se pulse el botón, React enviará una petición al servidor para ejecutar la función `createNoteAction`con la referencia proporcionada:
58
58
59
59
```js {5}
60
60
"use client";
@@ -66,12 +66,12 @@ export default function Button({onClick}) {
66
66
}
67
67
```
68
68
69
-
For more, see the docs for[`"use server"`](/reference/rsc/use-server).
69
+
Para más información, consulte la documentación de[`"use server"`](/reference/rsc/use-server).
70
70
71
71
72
-
### Importing Server Functions from Client Components {/*importing-server-functions-from-client-components*/}
72
+
### Importar Server Functions desde Client Components {/*importing-server-functions-from-client-components*/}
73
73
74
-
Client Components can import Server Functions from files that use the `"use server"` directive:
74
+
Los Client Components pueden importar Server Functions desde archivos que utilicen la directiva `"use server"`:
75
75
76
76
```js [[1, 3, "createNote"]]
77
77
"use server";
@@ -82,7 +82,7 @@ export async function createNote() {
82
82
83
83
```
84
84
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:
85
+
Cuando el bundler construye el Client Component`EmptyNote`, creará una referencia a la función `createNote`en el bundle. Cuando se pulse el botón, React enviará una petición al servidor para ejecutar la función `createNote`utilizando la referencia proporcionada:
For more, see the docs for[`"use server"`](/reference/rsc/use-server).
98
+
Para más información, consulte la documentación de[`"use server"`](/reference/rsc/use-server).
99
99
100
-
### Server Functions with Actions {/*server-functions-with-actions*/}
100
+
### Server Functions con Actions {/*server-functions-with-actions*/}
101
101
102
-
Server Functions can be called from Actions on the client:
102
+
Las Server Functions pueden ser llamadas desde Actions en el cliente:
103
103
104
104
```js [[1, 3, "updateName"]]
105
105
"use server";
@@ -143,15 +143,15 @@ function UpdateName() {
143
143
}
144
144
```
145
145
146
-
This allows you to access the`isPending`state of the Server Function by wrapping it in an Action on the client.
146
+
Esto te permite acceder al estado`isPending`de la Server Function envolviéndola en una Action en el cliente.
147
147
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)
148
+
Para más información, consulte la documentación de [Llamada a una Server Function fuera de`<form>`](/reference/rsc/use-server#calling-a-server-function-outside-of-form)
149
149
150
-
### Server Functions with Form Actions {/*using-server-functions-with-form-actions*/}
150
+
### Server Functions con Form Actions {/*using-server-functions-with-form-actions*/}
151
151
152
-
Server Functions work with the new Form features in React 19.
152
+
Las Server Functions funcionan con las nuevas funciones de Form de React 19.
153
153
154
-
You can pass a Server Function to a Form to automatically submit the form to the server:
154
+
Puede pasar una Server Function a un Form para automáticamente enviar el formulario al servidor:
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.
171
+
Cuando el envío del Form tiene éxito, React restablecerá automáticamente el formulario. Puedes añadir `useActionState`para acceder al estado pendiente, última respuesta, o para soportar la mejora progresiva.
172
172
173
-
For more, see the docs for[Server Functions in Forms](/reference/rsc/use-server#server-functions-in-forms).
173
+
Para más información, consulte la documentación de[Server Functions en Forms](/reference/rsc/use-server#server-functions-in-forms).
174
174
175
-
### Server Functions with`useActionState` {/*server-functions-with-use-action-state*/}
175
+
### Server Functions con`useActionState` {/*server-functions-with-use-action-state*/}
176
176
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:
177
+
Puede llamar a las Server Functions con`useActionState`para el caso común en el que sólo necesite acceder al estado pendiente de la acción y a la última respuesta devuelta:
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.
196
+
Al utilizar`useActionState`con Server Functions, React también reproducirá automáticamente los envíos de formularios introducidos antes de que finalice la hidratación. Esto significa que los usuarios pueden interactuar con la aplicación incluso antes de que esta se haya hidratado.
197
197
198
-
For more, see the docs for[`useActionState`](/reference/react-dom/hooks/useFormState).
198
+
Para más información, consulte la documentación de[`useActionState`](/reference/react/useActionState).
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.
220
+
Cuando se proporciona <CodeStepstep={2}>permalink</CodeStep> a `useActionState`, React redirigirá a la URL proporcionada si el formulario se envía antes de que se cargue el paquete JavaScript.
221
221
222
-
For more, see the docs for[`useActionState`](/reference/react-dom/hooks/useFormState).
222
+
Para más información, consulte la documentación de[`useActionState`](/reference/react/useActionState).
0 commit comments