Next.js 36: Llamar Actions fuera de formularios
easy⏱ 5 mincoursenextjs
Las Actions son solo funciones
<form action={fn}> es una forma conveniente de llamar a una Server Action, pero ni de cerca la única. Como la acción es una función async, puedes llamarla en cualquier lugar donde llamarías a cualquier otra función asíncrona: onClick={() => deleteComment(id)}, dentro de useEffect para una sincronización periódica, o encadenada tras otra llamada asíncrona. Next.js maneja la llamada de red igual sin importar desde dónde la invoques.
'use server';
export async function deleteComment(id: string) {
await db.comment.delete({ where: { id } });
}
// In a Client Component:
function DeleteButton({ id }: { id: string }) {
return (
<button onClick={() => deleteComment(id)}>
Delete
</button>
);
}
Pasar argumentos extra
Una Server Action llamada desde un formulario solo recibe (prevState, formData) — pero llamada directamente, puedes pasarle los argumentos que quieras, como cualquier función: deleteComment(comment.id). Prefiere una arrow inline (() => deleteComment(id)) sobre .bind(null, id) al leer un Componente de Cliente — ambas funcionan, pero la arrow es más fácil de seguir.
Rastrea el pendiente por elemento, no globalmente
Cuando varias filas pueden disparar la misma acción de forma independiente (borrar este comentario, dar like a aquel), un único booleano isPending no alcanza — hacer clic en borrar en el comentario A no debería deshabilitar también el botón del comentario B. Rastrea qué id está en curso (deletingId) para que solo la fila relevante muestre un estado pendiente.
Borra al hacer clic
Agrega una acción simulada deleteCommentAction(id) (retraso falso y luego 'elimina' el comentario). Renderiza un botón Delete por comentario que la llame directamente en onClick — sin formulario. Rastrea un state deletingId para que solo el comentario que se está borrando muestre 'Deleting…' y un botón deshabilitado. Mantén export default App.