Next.js 13. Server Actions.

Potenciando el Mejoramiento Progresivo y las Mutaciones de Datos del Lado del Servidor
Las Acciones del Servidor, es una característica emocionante de Next.js, construida sobre las Acciones de React, abren un mundo de posibilidades para los desarrolladores. Permiten mutaciones de datos del lado del servidor, reducen el JavaScript del lado del cliente y ofrecen formularios con mejoramiento progresivo. Las Acciones del Servidor se pueden definir dentro de Componentes del Servidor y se pueden llamar desde Componentes del Cliente, proporcionando una poderosa combinación de características que mejoran la experiencia del usuario y mejoran el rendimiento en general.

Intro Acciones del Servidor

En el mundo de Next.js, las Acciones del Servidor llevan la obtención de datos a un nivel completamente nuevo. Te permiten definir funciones asíncronas en el servidor que pueden invocarse directamente desde los componentes del lado del cliente. Esta integración reduce la brecha entre el servidor y el cliente, lo que permite interacciones sin problemas y actualizaciones dinámicas sin comprometer la experiencia del usuario.

La Magia del Mejoramiento Progresivo

Uno de los aspectos destacados de las Acciones del Servidor es su capacidad para adoptar el mejoramiento progresivo. A diferencia de los enfoques tradicionales, donde se requiere JavaScript para enviar formularios, las Acciones del Servidor permiten que tus formularios funcionen perfectamente incluso sin JavaScript del lado del cliente. Esto significa que tus usuarios pueden interactuar con los formularios y enviar datos independientemente de si JavaScript está habilitado o no. Gracias a la hidratación selectiva incorporada de Next.js, los formularios se hidratan rápidamente, mejorando el rendimiento en general.

Definición de Acciones del Servidor

Crear Acciones del Servidor en Next.js es sencillo, y tienes dos opciones para definirlas:

1. Dentro de Componentes del Servidor

Las Acciones del Servidor se pueden definir directamente dentro de Componentes del Servidor. Simplemente defines una función asíncrona con la directiva “use server” en la parte superior del cuerpo de la función. Debe tener argumentos serializables y un valor de retorno serializable basado en el protocolo de Componentes del Servidor de React.

// app/server-component.js
export default function ServerComponent() {
  async function myAction() {
    'use server'
    // ... Tu lógica del lado del servidor aquí
  }
}

2. En Archivos Separados para Reutilización

Alternativamente, puedes definir Acciones del Servidor en archivos separados para una mejor organización y reutilización en diferentes componentes.

// app/actions.js
'use server'

export async function myAction() {
  // ... Tu lógica del lado del servidor aquí
}

Uso de Acciones del Servidor en Componentes del Cliente

Ahora que hemos definido nuestras Acciones del Servidor, veamos cómo podemos utilizarlas en Componentes del Cliente:

Acciones del Servidor con Componentes del Cliente

Para usar una Acción del Servidor dentro de un Componente del Cliente, simplemente importa la acción desde el archivo respectivo. El componente del lado del cliente puede interactuar con la Acción del Servidor según sea necesario.

// app/client-component.js
'use client'

import { myAction } from './actions.js'

export default function ClientComponent() {
  return (
    <form action={myAction}>
      {/* ... Tus elementos de formulario */}
    </form>
  )
}

Mejoramiento Progresivo con Acciones del Servidor

Como se mencionó anteriormente, las Acciones del Servidor son excelentes para proporcionar mejoramiento progresivo. Veamos cómo puedes lograr esto en tu aplicación de Next.js.

Uso de Acciones para la Interactividad

Al pasar directamente una Acción del Servidor a la prop action de un elemento de formulario, haces que el formulario sea interactivo incluso sin JavaScript del lado del cliente.

// app/add-to-cart.js
import { cookies } from 'next/headers'

export default function AddToCart({ productId }) {
  async function addItem(data) {
    'use server'

    const cartId = cookies().get('cartId')?.value
    await saveToDb({ cartId, data })
  }

  return (
    <form action={addItem}>
      {/* ... Tus elementos de formulario */}
    </form>
  )
}

Uso de formAction para Acciones de Formulario

Otra opción es usar la prop formAction para manejar Acciones de Formulario en elementos de formulario específicos, como botones y campos de entrada.

// app/form.js
export default function Form() {
  async function handleSubmit() {
    'use server'
    // ... Tu lógica de envío de formulario aquí
  }

  async function submitImage() {
    'use server'
    // ... Tu lógica para manejar envíos de imágenes
  }

  return (
    <form action={handleSubmit}>
      <input type="text" name="name" />
      <input type="image" formAction={submitImage} />
      <button type="submit">Enviar</button>
    </form>
  )
}

Invocación Personalizada con startTransition

Para mayor flexibilidad, puedes invocar Acciones del Servidor fuera de formularios, botones o campos de entrada utilizando el método startTransition. Este método te permite deshabilitar el Mejoramiento Progresivo y habilita la invocación personalizada de acciones.

// app/components/example-client-component.js
'use client'

import { useTransition } from 'react'
import { addItem } from '../actions'

function ExampleClientComponent({ id }) {
  let [isPending, startTransition] = useTransition()

  return (
    <button onClick={() => startTransition(() => addItem(id))}>
      Agregar al Carrito
    </button>
  )
}

useTransition es un poderoso hook de React que mejora tanto la experiencia del usuario como el proceso de desarrollo en ciertos escenarios. Veamos cómo logra estas mejoras:

Estados de Carga Optimizados
Una de las principales ventajas de useTransition es su capacidad para crear estados de carga optimizados para las interacciones del usuario. Cuando un usuario desencadena una acción que involucra una tarea asíncrona, como enviar un formulario o realizar una solicitud al servidor, useTransition proporciona una forma de manejar el estado de carga de manera elegante.

Durante la transición, React optimiza el rendimiento y evita bloquear la interfaz de usuario. Esto significa que la interfaz de usuario permanece receptiva, y el usuario puede ver señales visuales, como spinners o barras de progreso, que indican que algo está sucediendo en segundo plano.

Como resultado, los usuarios perciben una interacción más suave y receptiva, reduciendo el riesgo de frustración causada por elementos de la interfaz de usuario que no responden.

Conclusión

Las Acciones del Servidor en Next.js revolucionan la obtención de datos y las interacciones con formularios. Con el mejoramiento progresivo y el JavaScript reducido del lado del cliente, tu aplicación se vuelve más eficiente y accesible. Al combinar las Acciones del Servidor con Componentes del Servidor, desbloqueas posibilidades poderosas para crear aplicaciones web dinámicas y de alto rendimiento.

Prueba las Acciones del Servidor en tus proyectos de Next.js y experimenta la integración perfecta de interacciones del servidor y del cliente. ¡Aprovecha el futuro del desarrollo web con Next.js y Acciones del Servidor!

— -

¡Espero que encuentres este artículo interesante e informativo! Si tienes algún tema específico o ejemplos que te gustaría explorar más, házmelo saber, ¡y estaré encantado de ampliarlos!