Server Actions en NextJs

Índice de contenidos

1. Introducción
2. Recomendaciones
3. ¿Qué son las Server Actions?
4. Formas de llamar a una Server Action
5. Server Actions en Server Components
6. Server Actions en Client Components
7. Siguientes pasos
8. Conclusión

Introducción

En este artículo vamos a ver un breve introducción hacia las Server Actions de Next.js, desarrolladas a partir de las React Server Actions. Comentaremos brevemente que son y veremos algunos casos muy simples de como utilizarlas. Mi intención es que conozcas este nuevo concepto de React y te animes a informarte más sobre él por tu cuenta.

Recomendaciones 👌

Antes de seguir con el artículo si no tienes claros los conceptos de Server Side Rendering (SSR) y React Server Component (RSC) te recomiendo que le eches un ojo a mi último articulo dónde explico en que consisten, ya que va a hacer que entiendas mucho mejor los conceptos que vamos a tratar en este.

¿Qué son las Server Actions? 🤔

Las Server Actions no son más que funciones asíncronas que se ejecutan en el lado del servidor y pueden ser llamadas desde el cliente. Con ellas, reducimos las vulnerabilidades y problemas de seguridad a la hora de pedir o mutar datos desde el cliente.

Beneficios de usar Server Actions 🙌

• Mejora la experiencia en casos de soporte limitado a JavaScript.
• Reduce la cantidad de JavaScript en el lado del cliente, lo que se traduce en mejor rendimiento.
• Ofrecen una manera sencilla de manejar la mutación y obtención de datos sin la necesidad de declarar APIs.

Formas de llamar a una Server Action 🪢

Existen varias formas para invocar una Server Action:

• Mediante la propiedad action de los formularios de React.

<form action={serverAction}>
...
</form>

• Mediante la propiedad formAction para diferentes elementos del formulario.

<form action={serverAction}>
    <input type="text" formAction={otherServerAction} />
    <button type="submit">Submit</button>
</form>

• Mediante el hook useTransition, esta sin necesidad de estar relacionada con un formulario.

'use client'

import { useTransition } from 'react'
import { addTodo } from '@/actions/addTodo';

export default function AddTodoButton() {
  let [isPending, startTransition] = useTransition()

  return (
    <button onClick={() => startTransition((todo) => { 
           addTodo(todo)})}>
      Add TODO
    </button>
  )
}

Server Actions en Server Components 🗄️

Crear una Server Action es un tarea muy sencilla, simplemente en la función asíncrona que quieres que funcione como un Server Action, debes añadir la directiva 'use server' en la parte superior de la función. Esta función luego puede ser llamada de las diferentes formas que hemos visto en el apartado anterior.

// app/add-todo.tsx

export default function TodoApp() {
  async function addTodo(formData: FormData) {
    "use server";

    const todoItem: Todo = formData.get('todo');
    await saveToDb(todoItem);
  }

  return (
    <form action={addTodo}>
      <button type="submit">Add TODO</button>
    </form>
  );
}

Server Actions en Client Components 💻

Definir un Server Action en un client component, no es posible. En el caso en el que quieras utilizar un Server Action dentro de un client component, vas a tener que extraer la Server Action a un fichero a parte y luego importarla dentro del componente. Esto es debido a la forma en la que trabaja Next.

// app/actions.ts
"use server";

async function addTodo(formData: FormData) {
  const todoItem: Todo = formData.get('todo');
  await saveToDb(todoItem);
}

// app/add-todo.tsx
"use client";

import { addTodo } from "./actions.tsx";

export default function AddTodo() {
  return (
    <form action={addTodo}>
      <button type="submit">Add TODO</button>
    </form>
  );
}

Siguientes pasos 🔜

Si te han resultado interesantes los Server Actions, te animo a que te informes mas sobre ellas y otras herramientas como por ejemplo useOptimistic o revalidatePath las cuales mejorarán la experiencia de usuario en tus aplicaciones.

Conclusión 🏁

Las Server Actions han generado bastante controversia en la comunidad, el hecho de no separar responsabilidades y que por ejemplo la propia consulta a la base de datos se encuentre dentro del propio componente en el frontend, a muchos no nos termina de convencer. Además hay a gente que el hecho de sentirse que vuelve al pasado, no les agrada, por lo que hace que se generen distintas opiniones alrededor este tema. Lo que si está claro es que con esta nueva funcionalidad, podemos agilizar nuestros procesos de desarrollo y mejorar la experiencia del usuario. Si tienes intención de usarla, evalúa tu caso previamente y haz una comparación de los beneficios que te aporta y los efectos secundarios que pueden afectar a tu desarrollo.

Muchas gracias por tu atención 🙌🏻.