Centrémonos en las operaciones CRUD. Anteriormente, solo leíamos datos del servidor y los mostrábamos al usuario. Ahora, cambiemos el enfoque hacia la creación, actualización y eliminación de datos. Todo esto lo realizaremos en la página de facturas.

Teoría

Antes de profundizar en la implementación, consideremos el término Server Actions en Next.js

Server Actions permiten ejecutar código especial directamente en el servidor. En lugar de crear métodos complicados para modificar los datos, se pueden utilizar estas acciones.

¿Por qué son importantes las Server Actions?

Las aplicaciones web deben ser seguras, ya que pueden ser atacadas de diferentes maneras. Las Server Actions contribuyen significativamente a la seguridad. Utilizan diversas técnicas como solicitudes especiales, mensajes codificados, verificaciones estrictas y restricciones para proteger la aplicación contra ataques, salvaguardar los datos y garantizar que solo personas autorizadas tengan acceso.

¿Cómo utilizamos formularios con Server Actions?

Es posible crear formularios que emplean Server Actions. En términos sencillos, se inserta un código especial en el formulario para indicar qué acción debe realizar. Esta acción obtiene automáticamente los datos introducidos en el formulario.

// Server Component
export default function Page() {
  // Action
  async function create(formData: FormData) {
    'use server';
 
    // Logic to change data...
  }
 
  // Put the action in the `action` attribute
  return <form action={create}>...</form>;
}