0Pricing
React Academy · Lección

Server Actions para mutaciones de datos

Defina funciones 'use server' para gestionar mutaciones de formularios e invalidar la caché con revalidatePath.

Server Actions para mutaciones de datos es una lección gratuita de React Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de React Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de React Academy incluye 4 lecciones en total.

¿Qué son las Server Actions?

Las Server Actions son funciones asíncronas marcadas con 'use server' que se ejecutan exclusivamente en el servidor. Permiten enviar formularios y realizar mutaciones de datos sin escribir controladores de rutas de API.

Definir una Server Action

Añada 'use server' al principio de la función (o del archivo) para crear una Server Action. Solo puede definirse en Server Components o en archivos actions.ts dedicados.

// app/actions.ts
'use server';

import { revalidatePath } from 'next/cache';
import { redirect } from 'next/navigation';

export async function createPost(formData: FormData) {
  const title = formData.get('title') as string;
  await db.post.create({ data: { title } });
  revalidatePath('/blog');
  redirect('/blog');
}

Usar acciones en formularios

Pase la función de acción a la propiedad action de un formulario. No necesita onSubmit ni un controlador de eventos: Next.js serializa el formulario y llama a la acción en el servidor.

import { createPost } from './actions';

export default function NewPostForm() {
  return (
    <form action={createPost}>
      <input name="title" placeholder="Post title" required />
      <button type="submit">Create</button>
    </form>
  );
}

Hook useActionState

useActionState (React 19) envuelve una acción para realizar un seguimiento del estado de espera y recibir el valor devuelto por la acción en el componente.

'use client';
import { useActionState } from 'react';
import { createPost } from './actions';

const initialState = { error: null };

export function PostForm() {
  const [state, action, isPending] = useActionState(createPost, initialState);
  return (
    <form action={action}>
      {state.error && <p className="error">{state.error}</p>}
      <input name="title" />
      <button disabled={isPending}>{isPending ? 'Creating...' : 'Create'}</button>
    </form>
  );
}

Devolver errores de validación

Devuelva un objeto desde la acción en lugar de lanzar una excepción para devolver los errores de validación al formulario mediante useActionState.

export async function createPost(prevState: any, formData: FormData) {
  'use server';
  const title = formData.get('title') as string;
  if (!title || title.length < 3) {
    return { error: 'Title must be at least 3 characters' };
  }
  await db.post.create({ data: { title } });
  revalidatePath('/blog');
  redirect('/blog');
}

Server Actions en controladores de eventos

Llame a las Server Actions desde los controladores de eventos de los Client Components, no solo desde las acciones de formularios, importándolas y llamándolas directamente.

'use client';
import { deletePost } from './actions';

export function DeleteButton({ id }: { id: string }) {
  return (
    <button onClick={() => deletePost(id)}>
      Delete
    </button>
  );
}

Server Actions en línea

Defina Server Actions en línea dentro de un Server Component mediante una función que contenga 'use server'; resulta útil para mantener junto el código de lógica de mutación.

export default function PostPage({ post }) {
  async function updatePost(formData: FormData) {
    'use server';
    await db.post.update({ where: { id: post.id }, data: { title: formData.get('title') as string } });
    revalidatePath(`/blog/${post.id}`);
  }

  return (
    <form action={updatePost}>
      <input name="title" defaultValue={post.title} />
      <button type="submit">Save</button>
    </form>
  );
}

useOptimistic con Server Actions

Combine useOptimistic con Server Actions para actualizar la interfaz de inmediato mientras la acción se ejecuta en segundo plano.

'use client';
import { useOptimistic } from 'react';
import { addItem } from './actions';

export function TodoList({ items }) {
  const [optimisticItems, addOptimistic] = useOptimistic(items, (state, newItem) => [...state, newItem]);
  return (
    <form action={async (formData) => {
      addOptimistic({ id: 'temp', text: formData.get('text') });
      await addItem(formData);
    }}>
      <ul>{optimisticItems.map(i => <li key={i.id}>{i.text}</li>)}</ul>
      <input name="text" /><button>Add</button>
    </form>
  );
}

Consideraciones de seguridad

En segundo plano, las Server Actions son endpoints POST. Valide y sanee siempre las entradas en el servidor, compruebe la autenticación y use protección CSRF (Next.js la gestiona automáticamente para el mismo origen).

Volver a validar después de las mutaciones

Llame a revalidatePath() o revalidateTag() después de una mutación para borrar las cachés relevantes, de modo que la siguiente carga de la página refleje el cambio.

Comprobación rápida

¿Cómo se pasa una Server Action a un formulario en Next.js App Router?

Repaso

Las Server Actions son funciones asíncronas con 'use server' que gestionan mutaciones en el servidor. Conéctelas a formularios mediante la propiedad action, realice un seguimiento de su estado con useActionState, devuelva errores en lugar de lanzar excepciones para la validación y vuelva a validar las cachés después de las mutaciones.

Preguntas frecuentes

¿La lección «Server Actions para mutaciones de datos» es gratis?

Sí — el texto completo de «Server Actions para mutaciones de datos» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de React Academy, actualiza a CoddyKit PRO. El curso de React Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Server Actions para mutaciones de datos»?

Defina funciones 'use server' para gestionar mutaciones de formularios e invalidar la caché con revalidatePath. Practicas React Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar React Academy?

No se requiere experiencia previa. React Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.

¿Cuánto tiempo toma la lección «Server Actions para mutaciones de datos»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de React Academy?

Sí. Cada lección de React Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

  1. fetch() con opciones de caché en Next.js
  2. unstable_cache y React cache()
  3. Regeneración estática incremental (ISR)
  4. Server Actions para mutaciones de datos
← Volver a React Academy