Uso de use server

La directiva use server designa una función o archivo para ser ejecutado en el lado del servidor (server side). Puede usarse al inicio de un archivo para indicar que todas las funciones en el archivo son del lado del servidor, o inline al inicio de una función para marcarla como una Función del Servidor (Server Function). Esta es una característica de React.

Usando `use server` al inicio de un archivo

El siguiente ejemplo muestra un archivo con una directiva use server al inicio. Todas las funciones en el archivo se ejecutan en el servidor.

'use server'
import { db } from '@/lib/db' // Tu cliente de base de datos

export async function createUser(data: { name: string; email: string }) {
  const user = await db.user.create({ data })
  return user
}

'use server'
import { db } from '@/lib/db' // Tu cliente de base de datos

export async function createUser(data) {
  const user = await db.user.create({ data })
  return user
}

Usando Funciones del Servidor en un Componente Cliente

Para usar Funciones del Servidor en Componentes Cliente, necesita crear sus Funciones del Servidor en un archivo dedicado usando la directiva use server al inicio del archivo. Estas Funciones del Servidor pueden luego importarse en Componentes Cliente y Servidor y ejecutarse.

Asumiendo que tiene una Función del Servidor fetchUsers en actions.ts:

'use server'
import { db } from '@/lib/db' // Tu cliente de base de datos

export async function fetchUsers() {
  const users = await db.user.findMany()
  return users
}

'use server'
import { db } from '@/lib/db' // Tu cliente de base de datos

export async function fetchUsers() {
  const users = await db.user.findMany()
  return users
}

Luego puede importar la Función del Servidor fetchUsers en un Componente Cliente y ejecutarla en el lado del cliente.

'use client'
import { fetchUsers } from '../actions'

export default function MyButton() {
  return <button onClick={() => fetchUsers()}>Obtener Usuarios</button>
}

'use client'
import { fetchUsers } from '../actions'

export default function MyButton() {
  return <button onClick={() => fetchUsers()}>Obtener Usuarios</button>
}

Usando `use server` inline

En el siguiente ejemplo, use server se usa inline al inicio de una función para marcarla como una Función del Servidor (Server Function):

import { EditPost } from './edit-post'
import { revalidatePath } from 'next/cache'

export default async function PostPage({ params }: { params: { id: string } }) {
  const post = await getPost(params.id)

  async function updatePost(formData: FormData) {
    'use server'
    await savePost(params.id, formData)
    revalidatePath(`/posts/${params.id}`)
  }

  return <EditPost updatePostAction={updatePost} post={post} />
}

import { EditPost } from './edit-post'
import { revalidatePath } from 'next/cache'

export default async function PostPage({ params }) {
  const post = await getPost(params.id)

  async function updatePost(formData) {
    'use server'
    await savePost(params.id, formData)
    revalidatePath(`/posts/${params.id}`)
  }

  return <EditPost updatePostAction={updatePost} post={post} />
}

Consideraciones de seguridad

Al usar la directiva use server, es importante asegurarse de que toda la lógica del lado del servidor sea segura y que los datos sensibles permanezcan protegidos.

Autenticación y autorización

Siempre autentique y autorice a los usuarios antes de realizar operaciones sensibles en el servidor.

'use server'

import { db } from '@/lib/db' // Tu cliente de base de datos
import { authenticate } from '@/lib/auth' // Tu biblioteca de autenticación

export async function createUser(
  data: { name: string; email: string },
  token: string
) {
  const user = authenticate(token)
  if (!user) {
    throw new Error('No autorizado')
  }
  const newUser = await db.user.create({ data })
  return newUser
}

'use server'

import { db } from '@/lib/db' // Tu cliente de base de datos
import { authenticate } from '@/lib/auth' // Tu biblioteca de autenticación

export async function createUser(data, token) {
  const user = authenticate(token)
  if (!user) {
    throw new Error('No autorizado')
  }
  const newUser = await db.user.create({ data })
  return newUser
}

Referencia

Consulte la documentación de React para más información sobre use server.

Usando use server al inicio de un archivo