Crea y usa Server Actions para formularios

Concepto clave

Las Server Actions en SvelteKit son funciones que se ejecutan exclusivamente en el servidor, permitiendo manejar operaciones sensibles como validaciones, acceso a bases de datos o procesamiento de datos sin exponer lógica al cliente. Imagina que estás en un restaurante: el cliente (navegador) solo ve el menú y hace pedidos, pero toda la preparación de la comida (validación de ingredientes, cocción, empaque) ocurre en la cocina (servidor). Esto mejora la seguridad y el rendimiento, ya que el código del servidor nunca llega al navegador.

Para formularios, las Server Actions reemplazan el enfoque tradicional de enviar datos a una API endpoint. En lugar de eso, defines una acción en +page.server.js que SvelteKit vincula automáticamente a tu formulario. Cuando el usuario envía el formulario, los datos viajan directamente a esta acción, se procesan en el servidor y se devuelve una respuesta. Esto elimina la necesidad de escribir fetch requests manuales y reduce la latencia, ya que todo ocurre en una sola solicitud HTTP.

Cómo funciona en la práctica

Veamos el flujo paso a paso para crear un formulario de contacto con Server Actions:

1. Crea un archivo +page.svelte con un formulario HTML estándar. Usa el atributo method="POST" y no necesitas especificar una acción; SvelteKit lo maneja automáticamente.
2. En el mismo directorio, crea +page.server.js y exporta una función llamada actions. Dentro, define una acción como default o con un nombre específico.
3. En la acción, accede a los datos del formulario usando request.formData(), valídalos y realiza operaciones como guardar en una base de datos.
4. Devuelve un objeto con resultados, como un mensaje de éxito o errores, que SvelteKit inyecta en la página para mostrar feedback al usuario.

Este enfoque es más eficiente que las APIs REST porque evita el viaje de ida y vuelta adicional. Por ejemplo, en una app de e-commerce, al agregar un producto al carrito, la Server Action puede actualizar la base de datos y devolver el nuevo total inmediatamente, sin recargar la página.

Código en acción

Aquí tienes un ejemplo funcional de un formulario de registro:

// +page.server.js
export const actions = {
  default: async ({ request }) => {
    const data = await request.formData();
    const email = data.get('email');
    const password = data.get('password');

    // Validación básica
    if (!email || !email.includes('@')) {
      return { error: 'Email inválido' };
    }
    if (password.length < 6) {
      return { error: 'La contraseña debe tener al menos 6 caracteres' };
    }

    // Simular guardado en base de datos
    console.log(`Usuario registrado: ${email}`);
    return { success: true, message: 'Registro exitoso' };
  }
};

Regístrate


{#if form?.error}
  
{form.error}
{/if}
{#if form?.success}
  
{form.message}
{/if}

Antes, con un enfoque tradicional, tendrías que crear un endpoint API separado y usar fetch en el cliente. Ahora, con Server Actions, todo está encapsulado en el servidor, mejorando la seguridad y simplificando el código.

Errores comunes

• Olvidar el use:enhance en el formulario: Sin esto, la página se recarga completamente al enviar el formulario, perdiendo la interactividad de SvelteKit. Siempre inclúyelo para habilitar actualizaciones progresivas.
• No validar datos en el servidor: Aunque valides en el cliente con HTML5, siempre valida en la Server Action. Los usuarios pueden deshabilitar JavaScript o manipular solicitudes, exponiendo vulnerabilidades.
• Confundir actions con load functions: Las actions manejan envíos de formularios (POST), mientras que load carga datos iniciales (GET). Usa +page.server.js para ambos, pero exporta funciones separadas.
• Ignorar manejo de errores: No asumas que las operaciones como guardar en BD siempre tendrán éxito. Envuelve tu código en try-catch y devuelve mensajes claros al usuario.
• Sobrecargar una acción con lógica compleja: Si una acción hace demasiado (ej., validar, procesar, enviar email), refactoriza en funciones auxiliares para mantenerla legible y testeable.

Checklist de dominio

1. Puedo crear un formulario en +page.svelte que use method="POST" y use:enhance.
2. Sé definir una Server Action en +page.server.js exportando un objeto actions.
3. Puedo acceder y validar datos del formulario usando request.formData().
4. Entiendo cómo devolver resultados (éxito/error) desde la acción y mostrarlos en la interfaz.
5. Puedo diferenciar entre acciones nombradas (para múltiples formularios) y la acción default.
6. Sé proteger datos sensibles manteniendo la lógica solo en el servidor.
7. Puedo integrar Server Actions con una base de datos real para operaciones CRUD.

Implementa un formulario de tareas con Server Actions

Crea una aplicación simple de lista de tareas donde los usuarios puedan agregar nuevas tareas usando Server Actions. Sigue estos pasos:

1. Configura un nuevo proyecto SvelteKit si no tienes uno: npm create svelte@latest my-todo-app.
2. En la página principal (src/routes/+page.svelte), crea un formulario con un campo de texto para la descripción de la tarea y un botón de enviar. Usa method="POST" y use:enhance.
3. En +page.server.js, exporta una acción default que:
   • Reciba los datos del formulario.
   • Valide que la descripción no esté vacía y tenga al menos 3 caracteres.
   • Simule guardar la tarea en un array en memoria (usa una variable let fuera de la acción).
   • Devuelva un objeto con success: true y la lista actualizada de tareas.
4. En la misma página, muestra la lista de tareas debajo del formulario. Usa la propiedad form para acceder a los datos devueltos por la acción.
5. Agrega un mensaje de error si la validación falla, y un mensaje de éxito cuando se agregue una tarea.
6. Opcional: Añade un botón para marcar tareas como completadas, usando otra acción nombrada en +page.server.js.

Pistas

• Recuerda que la variable en memoria se reseteará al recargar la página; en un caso real, usarías una base de datos.
• Usa export let form; en el script de +page.svelte para acceder a los resultados de la acción.
• Para acciones nombradas, define un nombre como addTask en el objeto actions y usa form?.['addTask'] en el frontend.

Evalua tu comprension

Completa el quiz interactivo de arriba para ganar XP.