Quiz: Revisión del proyecto integrador

Tipo de lección: Quiz

Concepto clave

En el desarrollo full-stack con SvelteKit, las Server Actions representan un cambio fundamental en cómo manejamos la lógica del servidor. Piensa en ellas como funciones que viven en el servidor pero que puedes llamar desde el cliente, similar a cómo un restaurante tiene una cocina (servidor) donde se preparan los platos, pero los comensales (cliente) solo ven el menú y hacen pedidos.

Este enfoque elimina la necesidad de crear APIs REST tradicionales para cada operación, reduciendo la complejidad y mejorando el rendimiento. En nuestra app de tareas en tiempo real, esto significa que acciones como crear, actualizar o eliminar tareas se ejecutan directamente en el servidor, con validación y seguridad integradas, mientras el cliente mantiene una interfaz reactiva.

Cómo funciona en la práctica

Imagina que estás construyendo la funcionalidad para agregar una nueva tarea. En lugar de enviar una solicitud HTTP a un endpoint API, defines una Server Action en +page.server.js que maneja la lógica. SvelteKit se encarga de serializar los datos, enviarlos al servidor, ejecutar la acción y devolver el resultado al cliente.

Paso a paso: 1) El usuario escribe una tarea en el formulario. 2) Al enviar, se llama a la Server Action createTask. 3) El servidor valida los datos, los guarda en la base de datos. 4) La interfaz se actualiza automáticamente con la nueva tarea, gracias a la reactividad de Svelte.

Código en acción

Antes: Usando un endpoint API tradicional en src/routes/api/tasks/+server.js:

// Método POST para crear tareas
export async function POST({ request }) {
  const data = await request.json();
  // Validación manual
  if (!data.title) {
    return new Response(JSON.stringify({ error: 'Título requerido' }), { status: 400 });
  }
  // Lógica de base de datos
  const newTask = await db.tasks.create(data);
  return new Response(JSON.stringify(newTask), { status: 201 });
}

Después: Usando una Server Action en src/routes/tasks/+page.server.js:

// Server Action para crear tareas
export const actions = {
  createTask: async ({ request }) => {
    const data = await request.formData();
    const title = data.get('title');
    // Validación integrada con SvelteKit
    if (!title) {
      return { success: false, error: 'Título requerido' };
    }
    // Lógica de base de datos
    const newTask = await db.tasks.create({ title });
    return { success: true, task: newTask };
  }
};

Errores comunes

• No validar datos en el servidor: Confiar solo en la validación del cliente deja agujeros de seguridad. Siempre valida en la Server Action.
• Olvidar manejar estados de carga: Las Server Actions pueden tardar; usa el estado $page.form de SvelteKit para mostrar indicadores.
• Mezclar lógica de cliente y servidor en el mismo archivo. Mantén las Server Actions en archivos .server.js.
• No usar transacciones en operaciones críticas: En apps de tareas, al marcar varias como completadas, usa transacciones de base de datos.
• Ignorar el manejo de errores: Envuelve las acciones en try-catch y devuelve errores amigables.

Checklist de dominio

1. He implementado al menos 3 Server Actions para CRUD de tareas.
2. He validado datos tanto en cliente como en servidor.
3. He configurado la base de datos para actualizaciones en tiempo real.
4. He optimizado el rendimiento con lazy loading de componentes.
5. He manejado errores y estados de carga en todas las acciones.
6. He asegurado que la app funcione sin JavaScript (progressive enhancement).
7. He desplegado la app y verificado su funcionamiento en producción.

Refactorizar una funcionalidad de tareas a Server Actions

En este ejercicio, mejorarás una app de tareas existente que usa APIs REST, convirtiéndola a Server Actions de SvelteKit para mejor rendimiento y simplicidad.

1. Analiza el código actual: Abre el archivo src/routes/tasks/+page.svelte y localiza la función que envía datos a /api/tasks.
2. Crea la Server Action: En src/routes/tasks/+page.server.js, define una acción llamada updateTask que reciba id y completed desde un FormData.
3. Implementa la lógica: Dentro de la acción, actualiza la tarea en la base de datos y devuelve un objeto con success y los datos actualizados.
4. Conecta el cliente: En el componente Svelte, reemplaza la llamada fetch con form action que use la Server Action.
5. Prueba la funcionalidad: Verifica que al marcar una tarea como completada, la interfaz se actualice sin recargar la página.

Pistas

• Usa enhance de SvelteKit para mejorar el formulario sin JavaScript.
• Recuerda que los datos de formulario se acceden con request.formData() en la Server Action.
• Para devolver errores, usa return { success: false, error: 'mensaje' }.

Evalua tu comprension

Completa el quiz interactivo de arriba para ganar XP.