Implementar Server Actions en formularios

Concepto clave

Las Server Actions en Next.js 15 son funciones que se ejecutan exclusivamente en el servidor, permitiendo manejar operaciones de datos directamente desde componentes del lado del cliente sin necesidad de crear endpoints API manuales. Piensa en ellas como "atajos seguros" que conectan tu interfaz de usuario con la lógica del servidor, eliminando la complejidad de configurar rutas API para cada acción.

En el contexto de formularios, esto significa que puedes enviar datos directamente a una función del servidor desde un formulario React, manteniendo la seguridad y el rendimiento. Es similar a cómo un restaurante tiene una cocina (servidor) separada del área de mesas (cliente): los clientes piden a través de un camarero (Server Action), y la comida se prepara en un entorno controlado sin exponer los fogones.

Cómo funciona en la práctica

Para implementar una Server Action en un formulario, sigue estos pasos:

1. Crea un archivo de acción en app/actions/form-actions.ts (o similar) con la palabra clave 'use server' al inicio.
2. Define una función asíncrona que reciba los datos del formulario, como async function submitForm(formData: FormData).
3. Importa y usa esta función en tu componente de formulario, pasándola a la prop action del formulario.
4. Procesa los datos en el servidor (ej., validación, guardado en base de datos) y devuelve un resultado.

Ejemplo básico:

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

export async function sendContactMessage(formData: FormData) {
  const name = formData.get('name');
  const email = formData.get('email');
  // Validar y guardar en base de datos
  return { success: true, message: 'Mensaje enviado' };
}

// app/components/ContactForm.tsx
import { sendContactMessage } from '@/app/actions/contact';

export default function ContactForm() {
  return (
    
      
      
      Enviar
    
  );
}

Caso de estudio

Imagina que estás construyendo una aplicación de gestión de tareas donde los usuarios pueden agregar nuevas tareas a través de un formulario. Usando Server Actions, puedes crear un flujo eficiente:

1. El usuario escribe una tarea en un campo de texto y hace clic en "Agregar".
2. El formulario envía los datos a una Server Action llamada addTask.
3. En el servidor, la acción valida la entrada, inserta la tarea en una base de datos PostgreSQL, y devuelve el ID de la nueva tarea.
4. La interfaz se actualiza automáticamente usando revalidación de caché de Next.js, mostrando la tarea en la lista sin recargar la página.

Tabla de datos de ejemplo para una tarea:

Las Server Actions manejan automáticamente la seguridad contra CSRF (Cross-Site Request Forgery), protegiendo tus formularios de ataques comunes sin configuración adicional.

Errores comunes

• Olvidar 'use server': Si no incluyes esta directiva al inicio del archivo o función, Next.js tratará el código como del lado del cliente, causando errores de ejecución. Solución: Asegúrate de que todas las Server Actions tengan 'use server' explícitamente.
• No validar datos en el servidor: Confiar solo en la validación del cliente deja vulnerabilidades. Solución: Implementa validaciones robustas en la Server Action, usando bibliotecas como Zod para esquemas.
• Exponer errores sensibles al cliente: Mostrar mensajes de error detallados del servidor puede filtrar información interna. Solución: Usa try-catch y devuelve errores genéricos, registrando los detalles solo en el servidor.
• Ignorar el estado de carga: Los usuarios no saben si el formulario se está procesando. Solución: Usa useFormStatus de React para mostrar indicadores de carga en el botón de envío.
• No manejar revalidación de caché: Los datos no se actualizan después de una acción. Solución: Llama a revalidatePath o revalidateTag en la Server Action para actualizar la caché.

Checklist de dominio

1. Puedo crear una Server Action desde cero en un archivo separado o dentro de un componente.
2. Sé cómo pasar datos de un formulario HTML a una Server Action usando FormData.
3. Implemento validación de datos tanto en el cliente como en el servidor para seguridad.
4. Uso revalidación de caché para actualizar la interfaz después de acciones exitosas.
5. Manejo estados de carga y error en la interfaz para mejorar la experiencia de usuario.
6. Protejo las Server Actions contra ataques comunes como inyección de datos.
7. Integro Server Actions con bases de datos o APIs externas para operaciones CRUD.

Crear un formulario de registro con Server Actions

En este ejercicio, implementarás un formulario de registro para una aplicación que guarda usuarios en una base de datos simulada. Sigue estos pasos:

1. Crea un nuevo proyecto Next.js 15 o usa uno existente con el App Router habilitado.
2. En la carpeta app, crea un archivo actions/register.ts y define una Server Action llamada registerUser que reciba un FormData.
3. La acción debe extraer los campos name, email, y password del FormData, validar que el email tenga formato correcto y la contraseña tenga al menos 6 caracteres, y simular el guardado en una base de datos (puedes usar un array en memoria para simular).
4. Devuelve un objeto con propiedades success (booleano) y message (string) indicando el resultado.
5. Crea un componente RegisterForm en app/components/RegisterForm.tsx que use un formulario HTML con campos para name, email, y password, y asigne la Server Action a la prop action.
6. Agrega manejo de estado para mostrar un mensaje de éxito o error basado en la respuesta de la Server Action.
7. Prueba el formulario enviando datos válidos e inválidos para verificar el comportamiento.

• Recuerda incluir 'use server' al inicio de tu archivo de acciones para que Next.js lo reconozca como código del servidor.
• Usa el hook useFormStatus de 'react-dom' para deshabilitar el botón de envío mientras se procesa la acción y mejorar la UX.
• Para simular la base de datos, puedes declarar un array fuera de la función, pero en un caso real usarías una conexión a PostgreSQL o similar.

Evalua tu comprension

Completa el quiz interactivo de arriba para ganar XP.