Cómo actualizar datos

Puedes actualizar datos en Next.js usando las Funciones de Servidor (Server Functions) de React. Esta página explicará cómo puedes crear e invocar Funciones de Servidor.

Funciones de Servidor

Una Función de Servidor es una función asíncrona que se ejecuta en el servidor. Las Funciones de Servidor son inherentemente asíncronas porque son invocadas por el cliente mediante una solicitud de red. Cuando se invocan como parte de una action, también se les llama Acciones de Servidor (Server Actions).

Por convención, una action es una función asíncrona pasada a startTransition. Las Funciones de Servidor se envuelven automáticamente con startTransition cuando:

• Se pasan a un <form> usando la prop action,
• Se pasan a un <button> usando la prop formAction
• Se pasan a useActionState

Creación de Funciones de Servidor

Una Función de Servidor puede definirse usando la directiva use server. Puedes colocar la directiva al inicio de una función asíncrona para marcarla como Función de Servidor, o al inicio de un archivo separado para marcar todas las exportaciones de ese archivo.

export async function createPost(formData: FormData) {
  'use server'
  const title = formData.get('title')
  const content = formData.get('content')

  // Actualizar datos
  // Revalidar caché
}

export async function deletePost(formData: FormData) {
  'use server'
  const id = formData.get('id')

  // Actualizar datos
  // Revalidar caché
}

Componentes de Servidor

Las Funciones de Servidor pueden incluirse en línea en Componentes de Servidor añadiendo la directiva "use server" al inicio del cuerpo de la función:

export default function Page() {
  // Acción de Servidor
  async function createPost(formData: FormData) {
    'use server'
    // ...
  }

  return <></>
}

Componentes de Cliente

No es posible definir Funciones de Servidor en Componentes de Cliente. Sin embargo, puedes invocarlas en Componentes de Cliente importándolas desde un archivo que tenga la directiva "use server" al inicio:

'use server'

export async function createPost() {}

Invocación de Funciones de Servidor

Hay dos formas principales de invocar una Función de Servidor:

1. Formularios en Componentes de Servidor y Cliente
2. Manejadores de Eventos en Componentes de Cliente

Formularios

React extiende el elemento HTML <form> para permitir que una Función de Servidor sea invocada con la prop action de HTML.

Cuando se invoca en un formulario, la función recibe automáticamente el objeto FormData. Puedes extraer los datos usando los métodos nativos de FormData:

import { createPost } from '@/app/actions'

export function Form() {
  return (
    <form action={createPost}>
      <input type="text" name="title" />
      <input type="text" name="content" />
      <button type="submit">Crear</button>
    </form>
  )
}

Nota importante: Cuando se pasan a la prop action, las Funciones de Servidor también se conocen como Acciones de Servidor (Server Actions).

Manejadores de Eventos

Puedes invocar una Función de Servidor en un Componente de Cliente usando manejadores de eventos como onClick.

'use client'

import { incrementLike } from './actions'
import { useState } from 'react'

export default function LikeButton({ initialLikes }: { initialLikes: number }) {
  const [likes, setLikes] = useState(initialLikes)

  return (
    <>
      <p>Total de Me gusta: {likes}</p>
      <button
        onClick={async () => {
          const updatedLikes = await incrementLike()
          setLikes(updatedLikes)
        }}
      >
        Me gusta
      </button>
    </>
  )
}

Ejemplos

Mostrar un estado pendiente

Durante la ejecución de una Función de Servidor, puedes mostrar un indicador de carga con el hook useActionState de React. Este hook devuelve un booleano pending:

'use client'

import { useActionState, startTransition } from 'react'
import { createPost } from '@/app/actions'
import { LoadingSpinner } from '@/app/ui/loading-spinner'

export function Button() {
  const [state, action, pending] = useActionState(createPost, false)

  return (
    <button onClick={() => startTransition(action)}>
      {pending ? <LoadingSpinner /> : 'Crear Publicación'}
    </button>
  )
}

Revalidar la caché

Después de realizar una actualización, puedes revalidar la caché de Next.js y mostrar los datos actualizados llamando a revalidatePath o revalidateTag dentro de la Función de Servidor:

import { revalidatePath } from 'next/cache'

export async function createPost(formData: FormData) {
  'use server'
  // Actualizar datos
  // ...

  revalidatePath('/posts')
}

Redireccionar

Puedes redirigir al usuario a una página diferente después de realizar una actualización. Esto se hace llamando a redirect dentro de la Función de Servidor:

'use server'

import { redirect } from 'next/navigation'

export async function createPost(formData: FormData) {
  // Actualizar datos
  // ...

  redirect('/posts')
}