Использование use server

Директива use server обозначает функцию или файл, которые должны выполняться на стороне сервера. Её можно использовать в начале файла, чтобы указать, что все функции в файле являются серверными, или внутри функции, чтобы пометить её как Серверную функцию (Server Function). Это особенность React.

Использование `use server` в начале файла

В следующем примере показан файл с директивой use server в начале. Все функции в этом файле выполняются на сервере.

'use server'
import { db } from '@/lib/db' // Ваш клиент базы данных

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' // Ваш клиент базы данных

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

Использование серверных функций в клиентском компоненте

Чтобы использовать серверные функции в клиентских компонентах, нужно создать их в отдельном файле с директивой use server в начале. Затем эти серверные функции можно импортировать в клиентские и серверные компоненты и выполнять.

Предположим, у вас есть серверная функция fetchUsers в файле actions.ts:

'use server'
import { db } from '@/lib/db' // Ваш клиент базы данных

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

'use server'
import { db } from '@/lib/db' // Ваш клиент базы данных

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

Затем вы можете импортировать серверную функцию fetchUsers в клиентский компонент и выполнять её на стороне клиента.

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

export default function MyButton() {
  return <button onClick={() => fetchUsers()}>Получить пользователей</button>
}

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

export default function MyButton() {
  return <button onClick={() => fetchUsers()}>Получить пользователей</button>
}

Использование `use server` внутри функции

В следующем примере use server используется внутри функции, чтобы пометить её как Серверную функцию (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} />
}

Вопросы безопасности

При использовании директивы use server важно убедиться, что вся серверная логика безопасна, а конфиденциальные данные защищены.

Аутентификация и авторизация

Всегда проверяйте аутентификацию и авторизацию пользователей перед выполнением чувствительных операций на сервере.

'use server'

import { db } from '@/lib/db' // Ваш клиент базы данных
import { authenticate } from '@/lib/auth' // Ваша библиотека аутентификации

export async function createUser(
  data: { name: string; email: string },
  token: string
) {
  const user = authenticate(token)
  if (!user) {
    throw new Error('Не авторизован')
  }
  const newUser = await db.user.create({ data })
  return newUser
}

'use server'

import { db } from '@/lib/db' // Ваш клиент базы данных
import { authenticate } from '@/lib/auth' // Ваша библиотека аутентификации

export async function createUser(data, token) {
  const user = authenticate(token)
  if (!user) {
    throw new Error('Не авторизован')
  }
  const newUser = await db.user.create({ data })
  return newUser
}

Справочные материалы

Дополнительную информацию о use server можно найти в документации React.

Использование use server в начале файла