Server Functions

Cuando se define una Server Function con la directiva "use server", tu framework creará automáticamente una referencia a la Server Function, y pasará esa referencia al Client Component. Cuando esa función es llamada en el cliente, React enviará una petición al servidor para ejecutar la función, y devolver el resultado.

Las Server Functions pueden crearse en Server Components y pasarse como props a los Client Components, o pueden importarse y utilizarse en Client Components.

Uso

Creación de una Server Function a partir de un Server Component

Los Server Components pueden definir Server Functions con la directiva "use server":

// Server Component
import Button from './Button';

function EmptyNote () {
  async function createNoteAction() {
    // Server Function
    'use server';
    
    await db.notes.create();
  }

  return <Button onClick={createNoteAction}/>;
}

Cuando React renderiza la Server Function EmptyNote, creará una referencia a la función createNoteAction, y pasará esa referencia al Client Component Button. Cuando se pulse el botón, React enviará una petición al servidor para ejecutar la función createNoteAction con la referencia proporcionada:

"use client";

export default function Button({onClick}) { 
  console.log(onClick); 
  // {$$typeof: Symbol.for("react.server.reference"), $$id: 'createNoteAction'}
  return <button onClick={() => onClick()}>Create Empty Note</button>
}

Para más información, consulte la documentación de "use server".

Importar Server Functions desde Client Components

Los Client Components pueden importar Server Functions desde archivos que utilicen la directiva "use server":

"use server";

export async function createNote() {
  await db.notes.create();
}

Cuando el bundler construye el Client Component EmptyNote, creará una referencia a la función createNote en el bundle. Cuando se pulse el botón, React enviará una petición al servidor para ejecutar la función createNote utilizando la referencia proporcionada:

"use client";
import {createNote} from './actions';

function EmptyNote() {
  console.log(createNote);
  // {$$typeof: Symbol.for("react.server.reference"), $$id: 'createNote'}
  <button onClick={() => createNote()} />
}

Para más información, consulte la documentación de "use server".

Server Functions con Actions

Las Server Functions pueden ser llamadas desde Actions en el cliente:

"use server";

export async function updateName(name) {
  if (!name) {
    return {error: 'Name is required'};
  }
  await db.users.updateName(name);
}

"use client";

import {updateName} from './actions';

function UpdateName() {
  const [name, setName] = useState('');
  const [error, setError] = useState(null);

  const [isPending, startTransition] = useTransition();

  const submitAction = async () => {
    startTransition(async () => {
      const {error} = await updateName(name);
      if (error) {
        setError(error);
      } else {
        setName('');
      }
    })
  }
  
  return (
    <form action={submitAction}>
      <input type="text" name="name" disabled={isPending}/>
      {error && <span>Failed: {error}</span>}
    </form>
  )
}

Esto te permite acceder al estado isPending de la Server Function envolviéndola en una Action en el cliente.

Para más información, consulte la documentación de Llamada a una Server Function fuera de <form>

Server Functions con Form Actions

Las Server Functions funcionan con las nuevas funciones de Form de React 19.

Puede pasar una Server Function a un Form para automáticamente enviar el formulario al servidor:

"use client";

import {updateName} from './actions';

function UpdateName() {
  return (
    <form action={updateName}>
      <input type="text" name="name" />
    </form>
  )
}

Cuando el envío del Form tiene éxito, React restablecerá automáticamente el formulario. Puedes añadir useActionState para acceder al estado pendiente, última respuesta, o para soportar la mejora progresiva.

Para más información, consulte la documentación de Server Functions en Forms.

Server Functions con useActionState

Puede llamar a las Server Functions con useActionState para el caso común en el que sólo necesite acceder al estado pendiente de la acción y a la última respuesta devuelta:

"use client";

import {updateName} from './actions';

function UpdateName() {
  const [state, submitAction, isPending] = useActionState(updateName, {error: null});

  return (
    <form action={submitAction}>
      <input type="text" name="name" disabled={isPending}/>
      {state.error && <span>Failed: {state.error}</span>}
    </form>
  );
}

Al utilizar useActionState con Server Functions, React también reproducirá automáticamente los envíos de formularios introducidos antes de que finalice la hidratación. Esto significa que los usuarios pueden interactuar con la aplicación incluso antes de que esta se haya hidratado.

Para más información, consulte la documentación de useActionState.

Mejora progresiva con useActionState

Las Server Functions también admiten la mejora progresiva con el tercer argumento de useActionState.

"use client";

import {updateName} from './actions';

function UpdateName() {
  const [, submitAction] = useActionState(updateName, null, `/name/update`);

  return (
    <form action={submitAction}>
      ...
    </form>
  );
}

Cuando se proporciona permalink a useActionState, React redirigirá a la URL proporcionada si el formulario se envía antes de que se cargue el paquete JavaScript.

Para más información, consulte la documentación de useActionState.