Desarrollo de funcionalidades con Server Actions

Concepto clave

Las Server Actions en Next.js 15 son funciones que se ejecutan exclusivamente en el servidor, permitiendo realizar operaciones seguras como mutaciones de datos, sin necesidad de crear rutas API manuales. Piensa en ellas como "atajos" que conectan directamente tu interfaz de usuario con la lógica del servidor, similar a cómo un formulario web tradicional envía datos a un endpoint, pero con la potencia de React y TypeScript.

Estas acciones se definen con 'use server' y pueden ser invocadas desde componentes cliente mediante eventos como onSubmit. La clave es que nunca se envían al cliente, manteniendo credenciales o lógica sensible seguras. Una analogía del mundo real: imagina un restaurante donde los comensales (cliente) solo ven el menú y hacen pedidos, mientras la cocina (servidor) prepara la comida con ingredientes y recetas que nunca salen a la sala.

Cómo funciona en la práctica

Para implementar una Server Action, sigue estos pasos en un proyecto Next.js 15 con App Router:

1. Crea un archivo actions.ts en tu proyecto y define una función asíncrona con 'use server' al inicio.
2. Exporta la función para usarla en componentes. Por ejemplo, una acción para agregar un usuario:

// actions.ts
export async function addUser(formData: FormData) {
  'use server';
  const name = formData.get('name') as string;
  // Lógica para guardar en base de datos
  console.log(`Usuario ${name} agregado`);
}

1. En un componente cliente, importa la acción y úsala en un formulario:

// app/page.tsx
import { addUser } from '@/actions';

export default function Home() {
  return (
    
      
      Agregar
    
  );
}

Al enviar el formulario, Next.js maneja la solicitud en el servidor, ejecuta addUser, y puede redirigir o actualizar la UI sin recargar la página completa.

Caso de estudio

Desarrollaremos una funcionalidad para una aplicación de tareas (todo-list) que permite agregar nuevas tareas usando Server Actions. Supongamos que tenemos una base de datos PostgreSQL y queremos evitar crear una ruta API separada.

Dato importante: Server Actions en Next.js 15 soportan Streaming SSR, permitiendo actualizar partes de la página sin bloquear la experiencia del usuario, ideal para aplicaciones interactivas.

Errores comunes

• Olvidar 'use server': Si no incluyes esta directiva, la función se ejecutará en el cliente, exponiendo lógica sensible. Siempre verifica que esté al inicio de la función.
• No validar datos en el servidor: Aunque valides en el cliente, los datos pueden ser manipulados. Usa bibliotecas como Zod en la acción para validaciones robustas.
• Ignorar manejo de errores: Las acciones deben capturar excepciones y retornar mensajes claros. Por ejemplo, usa try-catch para errores de base de datos.
• Abusar de acciones para consultas: Server Actions son para mutaciones (POST, PUT, DELETE). Para datos de solo lectura, usa Server Components o fetching estándar.
• No optimizar rendimiento: Acciones grandes o lentas pueden bloquear la UI. Divide lógica compleja y usa técnicas como debouncing en formularios.

Checklist de dominio

1. Puedo definir una Server Action con 'use server' en un archivo separado o dentro de un componente.
2. Sé invocar una Server Action desde un formulario en un componente cliente usando el prop action.
3. Implemento validación de datos tanto en cliente como en servidor para seguridad.
4. Uso useTransition o estados para manejar carga y retroalimentación durante la ejecución.
5. Integro Server Actions con una base de datos real (ej., PostgreSQL o MongoDB) para operaciones CRUD.
6. Manejo errores en acciones retornando objetos con mensajes que la UI puede mostrar.
7. Comprendo cuándo usar Server Actions vs. rutas API tradicionales en Next.js.

Implementar un sistema de comentarios con Server Actions

En este ejercicio, crearás una funcionalidad para agregar comentarios a una publicación en una aplicación de blog usando Server Actions. Sigue estos pasos:

1. Configura un proyecto Next.js 15 con App Router si no lo tienes, y asegúrate de tener una base de datos simulada (puedes usar un array en memoria para simplicidad).
2. Crea un archivo app/actions/comment.ts y define una Server Action llamada addComment que:
   • Acepte un FormData con campos para postId (número), author (string), y content (string).
   • Valide que content no esté vacío y tenga al menos 10 caracteres.
   • Simule guardar el comentario en un array (ej., comments.push(...)) y retorne un objeto con éxito o error.
3. En app/posts/[id]/page.tsx, crea un componente que muestre una lista de comentarios y un formulario para agregar nuevos:
   • Usa action={addComment} en el formulario, con campos ocultos para postId.
   • Implementa useTransition para mostrar un spinner mientras se envía el comentario.
   • Después de enviar, actualiza la lista de comentarios sin recargar la página (puedes usar revalidación o estado local).
4. Prueba la funcionalidad agregando comentarios y verificando que se muestren en la UI y que las validaciones funcionen.

• Recuerda que 'use server' debe estar al inicio de la función en actions/comment.ts.
• Usa useState y useEffect para manejar la lista de comentarios en el componente, o considera usar Server Components para datos iniciales.
• Para simular una base de datos, declara un array fuera de la acción (ej., let comments = []), pero en un caso real usarías una DB como PostgreSQL.

Evalua tu comprension

Completa el quiz interactivo de arriba para ganar XP.