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: apps/docs/content/es/docs/01-app/01-getting-started/10-updating-data.mdx
+37-37Lines changed: 37 additions & 37 deletions
Original file line number
Diff line number
Diff line change
@@ -1,33 +1,33 @@
1
1
---
2
-
source-updated-at: 2025-06-01T01:32:20.000Z
3
-
translation-updated-at: 2025-06-02T20:02:54.513Z
2
+
source-updated-at: 2025-06-03T15:30:49.000Z
3
+
translation-updated-at: 2025-06-06T16:38:51.012Z
4
4
title: Cómo actualizar datos
5
5
nav_title: Actualización de datos
6
-
description: Aprende cómo actualizar datos en tu aplicación Next.js.
6
+
description: Aprende a actualizar datos en tu aplicación Next.js.
7
7
related:
8
8
title: Referencia de API
9
-
description: Obtén más información sobre las características mencionadas en esta página leyendo la Referencia de API.
9
+
description: Conoce más sobre las características mencionadas en esta página leyendo la Referencia de API.
10
10
links:
11
11
- app/api-reference/functions/revalidatePath
12
12
- app/api-reference/functions/revalidateTag
13
13
- app/api-reference/functions/redirect
14
14
---
15
15
16
-
Puedes actualizar datos en Next.js utilizando las [Funciones del Servidor (Server Functions)](https://react.dev/reference/rsc/server-functions) de React. Esta página explicará cómo puedes [crear](#creando-funciones-del-servidor) e [invocar](#invocando-funciones-del-servidor) Funciones del Servidor.
16
+
Puedes actualizar datos en Next.js usando las [Funciones de Servidor (Server Functions)](https://react.dev/reference/rsc/server-functions) de React. Esta página explicará cómo puedes [crear](#creación-de-funciones-de-servidor) e [invocar](#invocación-de-funciones-de-servidor) Funciones de Servidor.
17
17
18
-
## Funciones del Servidor
18
+
## Funciones de Servidor
19
19
20
-
Una Función del Servidor es una función asíncrona que se ejecuta en el servidor. Las Funciones del Servidor son inherentemente asíncronas porque son invocadas por el cliente mediante una solicitud de red. Cuando se invocan como parte de una `action`, también se les llama **Acciones del Servidor (Server Actions)**.
20
+
Una Función de Servidor es una función asíncrona que se ejecuta en el servidor. Las Funciones de Servidor son inherentemente asíncronas porque son invocadas por el cliente mediante una solicitud de red. Cuando se invocan como parte de una `action`, también se les llama **Acciones de Servidor (Server Actions)**.
21
21
22
-
Por convención, una `action` es una función asíncrona pasada a `startTransition`. Las Funciones del Servidor se envuelven automáticamente con `startTransition` cuando:
22
+
Por convención, una `action` es una función asíncrona pasada a `startTransition`. Las Funciones de Servidor se envuelven automáticamente con `startTransition` cuando:
23
23
24
24
- Se pasan a un `<form>` usando la prop `action`,
25
25
- Se pasan a un `<button>` usando la prop `formAction`
26
26
- Se pasan a `useActionState`
27
27
28
-
## Creando Funciones del Servidor
28
+
## Creación de Funciones de Servidor
29
29
30
-
Una Función del Servidor puede definirse usando la directiva [`use server`](https://react.dev/reference/rsc/use-server). Puedes colocar la directiva al inicio de una función **asíncrona** para marcar la función como una Función del Servidor, o al inicio de un archivo separado para marcar todas las exportaciones de ese archivo.
30
+
Una Función de Servidor puede definirse usando la directiva [`use server`](https://react.dev/reference/rsc/use-server). Puedes colocar la directiva al inicio de una función **asíncrona** para marcarla como Función de Servidor, o al inicio de un archivo separado para marcar todas las exportaciones de ese archivo.
@@ -67,13 +67,13 @@ export async function deletePost(formData) {
67
67
}
68
68
```
69
69
70
-
### Componentes del Servidor
70
+
### Componentes de Servidor
71
71
72
-
Las Funciones del Servidor pueden incluirse en línea en Componentes del Servidor añadiendo la directiva `"use server"` al inicio del cuerpo de la función:
72
+
Las Funciones de Servidor pueden incluirse en línea en Componentes de Servidor añadiendo la directiva `"use server"` al inicio del cuerpo de la función:
73
73
74
74
```tsx filename="app/page.tsx" switcher
75
75
exportdefaultfunction Page() {
76
-
// Acción del Servidor
76
+
// Acción de Servidor
77
77
asyncfunction createPost(formData:FormData) {
78
78
'use server'
79
79
// ...
@@ -85,7 +85,7 @@ export default function Page() {
85
85
86
86
```jsx filename="app/page.js" switcher
87
87
exportdefaultfunctionPage() {
88
-
// Acción del Servidor
88
+
// Acción de Servidor
89
89
asyncfunctioncreatePost(formData) {
90
90
'use server'
91
91
// ...
@@ -95,9 +95,9 @@ export default function Page() {
95
95
}
96
96
```
97
97
98
-
### Componentes del Cliente
98
+
### Componentes de Cliente
99
99
100
-
No es posible definir Funciones del Servidor en Componentes del Cliente. Sin embargo, puedes invocarlas en Componentes del Cliente importándolas desde un archivo que tenga la directiva `"use server"` al inicio:
100
+
No es posible definir Funciones de Servidor en Componentes de Cliente. Sin embargo, puedes invocarlas en Componentes de Cliente importándolas desde un archivo que tenga la directiva `"use server"` al inicio:
101
101
102
102
```ts filename="app/actions.ts" switcher
103
103
'use server'
@@ -131,16 +131,16 @@ export function Button() {
131
131
}
132
132
```
133
133
134
-
## Invocando Funciones del Servidor
134
+
## Invocación de Funciones de Servidor
135
135
136
-
Hay dos formas principales de invocar una Función del Servidor:
136
+
Hay dos formas principales de invocar una Función de Servidor:
137
137
138
-
1.[Formularios](#formularios) en Componentes del Servidor y del Cliente
139
-
2.[Manejadores de Eventos](#manejadores-de-eventos) en Componentes del Cliente
138
+
1.[Formularios](#formularios) en Componentes de Servidor y Cliente
139
+
2.[Manejadores de Eventos](#manejadores-de-eventos) en Componentes de Cliente
140
140
141
141
### Formularios
142
142
143
-
React extiende el elemento HTML [`<form>`](https://react.dev/reference/react-dom/components/form) para permitir que una Función del Servidor sea invocada con la prop `action` de HTML.
143
+
React extiende el elemento HTML [`<form>`](https://react.dev/reference/react-dom/components/form) para permitir que una Función de Servidor sea invocada con la prop `action` de HTML.
144
144
145
145
Cuando se invoca en un formulario, la función recibe automáticamente el objeto [`FormData`](https://developer.mozilla.org/docs/Web/API/FormData/FormData). Puedes extraer los datos usando los [métodos nativos de `FormData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData#instance_methods):
146
146
@@ -196,11 +196,11 @@ export async function createPost(formData) {
196
196
}
197
197
```
198
198
199
-
> **Nota importante:** Cuando se pasan a la prop `action`, las Funciones del Servidor también se conocen como _Acciones del Servidor (Server Actions)_.
199
+
> **Nota importante:** Cuando se pasan a la prop `action`, las Funciones de Servidor también se conocen como _Acciones de Servidor (Server Actions)_.
200
200
201
201
### Manejadores de Eventos
202
202
203
-
Puedes invocar una Función del Servidor en un Componente del Cliente usando manejadores de eventos como `onClick`.
203
+
Puedes invocar una Función de Servidor en un Componente de Cliente usando manejadores de eventos como `onClick`.
204
204
205
205
```tsx filename="app/like-button.tsx" switcher
206
206
'use client'
@@ -213,7 +213,7 @@ export default function LikeButton({ initialLikes }: { initialLikes: number }) {
Mientras se ejecuta una Función del Servidor, puedes mostrar un indicador de carga con el hook [`useActionState`](https://react.dev/reference/react/useActionState) de React. Este hook devuelve un booleano `pending`:
259
+
Durante la ejecución de una Función de Servidor, puedes mostrar un indicador de carga con el hook [`useActionState`](https://react.dev/reference/react/useActionState) de React. Este hook devuelve un booleano `pending`:
Después de realizar una actualización, puedes revalidar la caché de Next.js y mostrar los datos actualizados llamando a [`revalidatePath`](/docs/app/api-reference/functions/revalidatePath) o [`revalidateTag`](/docs/app/api-reference/functions/revalidateTag) dentro de la Función del Servidor:
299
+
Después de realizar una actualización, puedes revalidar la caché de Next.js y mostrar los datos actualizados llamando a [`revalidatePath`](/docs/app/api-reference/functions/revalidatePath) o [`revalidateTag`](/docs/app/api-reference/functions/revalidateTag) dentro de la Función de Servidor:
300
300
301
301
```ts filename="app/lib/actions.ts" switcher
302
302
import { revalidatePath } from'next/cache'
@@ -321,9 +321,9 @@ export async function createPost(formData) {
321
321
}
322
322
```
323
323
324
-
### Redireccionando
324
+
### Redireccionar
325
325
326
-
Puedes querer redirigir al usuario a una página diferente después de realizar una actualización. Puedes hacer esto llamando a [`redirect`](/docs/app/api-reference/functions/redirect) dentro de la Función del Servidor:
326
+
Puedes redirigir al usuario a una página diferente después de realizar una actualización. Esto se hace llamando a [`redirect`](/docs/app/api-reference/functions/redirect) dentro de la Función de Servidor:
|[Adaptadores](#adapters)| Depende de la plataforma |
17
17
18
18
## Servidor Node.js
19
19
20
-
Next.js puede implementarse en cualquier proveedor que soporte Node.js. Asegúrate de que tu `package.json` tenga los scripts `"build"` y `"start"`:
20
+
Next.js puede desplegarse en cualquier proveedor que soporte Node.js. Asegúrate de que tu `package.json` tenga los scripts `"build"` y `"start"`:
21
21
22
22
```json filename="package.json"
23
23
{
@@ -29,9 +29,9 @@ Next.js puede implementarse en cualquier proveedor que soporte Node.js. Asegúra
29
29
}
30
30
```
31
31
32
-
Luego, ejecuta `npm run build` para construir tu aplicación y `npm run start` para iniciar el servidor Node.js. Este servidor soporta todas las funcionalidades de Next.js. Si es necesario, también puedes optar por un [servidor personalizado](/docs/app/guides/custom-server).
32
+
Luego, ejecuta `npm run build` para construir tu aplicación y `npm run start` para iniciar el servidor Node.js. Este servidor soporta todas las características de Next.js. Si es necesario, también puedes migrar a un [servidor personalizado](/docs/app/guides/custom-server).
33
33
34
-
Las implementaciones con Node.js soportan todas las funcionalidades de Next.js. Aprende cómo [configurarlas](/docs/app/guides/self-hosting) para tu infraestructura.
34
+
Los despliegues en Node.js soportan todas las características de Next.js. Aprende cómo [configurarlos](/docs/app/guides/self-hosting) para tu infraestructura.
35
35
36
36
### Plantillas
37
37
@@ -41,9 +41,11 @@ Las implementaciones con Node.js soportan todas las funcionalidades de Next.js.
41
41
42
42
## Docker
43
43
44
-
Next.js puede implementarse en cualquier proveedor que soporte contenedores [Docker](https://www.docker.com/). Esto incluye orquestadores de contenedores como Kubernetes o proveedores en la nube que ejecuten Docker.
44
+
Next.js puede desplegarse en cualquier proveedor que soporte contenedores [Docker](https://www.docker.com/). Esto incluye orquestadores de contenedores como Kubernetes o proveedores en la nube que ejecuten Docker.
45
45
46
-
Las implementaciones con Docker soportan todas las funcionalidades de Next.js. Aprende cómo [configurarlas](/docs/app/guides/self-hosting) para tu infraestructura.
46
+
Los despliegues con Docker soportan todas las características de Next.js. Aprende cómo [configurarlos](/docs/app/guides/self-hosting) para tu infraestructura.
47
+
48
+
> **Nota para desarrollo:** Aunque Docker es excelente para despliegues en producción, considera usar desarrollo local (`npm run dev`) en lugar de Docker durante el desarrollo en Mac y Windows para mejor rendimiento. [Aprende más sobre optimización de desarrollo local](/docs/app/guides/local-development).
47
49
48
50
### Plantillas
49
51
@@ -57,26 +59,26 @@ Las implementaciones con Docker soportan todas las funcionalidades de Next.js. A
57
59
58
60
## Exportación estática
59
61
60
-
Next.js permite comenzar como un sitio estático o [Aplicación de Página Única (SPA)](/docs/app/guides/single-page-applications), y luego opcionalmente actualizar para usar funcionalidades que requieran un servidor.
62
+
Next.js permite comenzar como un sitio estático o [Aplicación de Página Única (SPA)](/docs/app/guides/single-page-applications), y luego actualizar opcionalmente para usar características que requieran un servidor.
61
63
62
-
Dado que Next.js soporta [exportaciones estáticas](/docs/app/guides/static-exports), puede implementarse y alojarse en cualquier servidor web que pueda servir activos estáticos HTML/CSS/JS. Esto incluye herramientas como AWS S3, Nginx o Apache.
64
+
Como Next.js soporta [exportaciones estáticas](/docs/app/guides/static-exports), puede desplegarse y alojarse en cualquier servidor web que pueda servir activos estáticos HTML/CSS/JS. Esto incluye herramientas como AWS S3, Nginx o Apache.
63
65
64
-
Ejecutarse como una [exportación estática](/docs/app/guides/static-exports)**no soporta**funcionalidades de Next.js que requieran un servidor. [Aprende más](/docs/app/guides/static-exports#unsupported-features).
66
+
Ejecutarse como una [exportación estática](/docs/app/guides/static-exports)**no soporta**características de Next.js que requieran un servidor. [Aprende más](/docs/app/guides/static-exports#unsupported-features).
> **Nota:** Estamos trabajando en una [API de Adaptadores de Implementación](https://github.com/vercel/next.js/discussions/77740) para que todas las plataformas puedan adoptarla. Una vez completada, añadiremos documentación sobre cómo escribir tus propios adaptadores.
84
+
> **Nota:** Estamos trabajando en una [API de Adaptadores de Despliegue](https://github.com/vercel/next.js/discussions/77740) para que todas las plataformas puedan adoptarla. Una vez completada, añadiremos documentación sobre cómo escribir tus propios adaptadores.
0 commit comments