Use Server

The use server directive designates a function or file to be executed on the server side. It can be used at the top of a file to indicate that all functions in the file are server-side, or inline at the top of a function to mark the function as a Server Function. This is a React feature.

Using `use server` at the top of a file

The following example shows a file with a use server directive at the top. All functions in the file are executed on the server.

'use server'
import { db } from '@/lib/db' // Your database client
 
export async function createUser(data: { name: string; email: string }) {
  const user = await db.user.create({ data })
  return user
}

Using Server Functions in a Client Component

To use Server Functions in Client Components you need to create your Server Functions in a dedicated file using the use server directive at the top of the file. These Server Functions can then be imported into Client and Server Components and executed.

Assuming you have a fetchUsers Server Function in actions.ts:

'use server'
import { db } from '@/lib/db' // Your database client
 
export async function fetchUsers() {
  const users = await db.user.findMany()
  return users
}

Then you can import the fetchUsers Server Function into a Client Component and execute it on the client-side.

'use client'
import { fetchUsers } from '../actions'
 
export default function MyButton() {
  return <button onClick={() => fetchUsers()}>Fetch Users</button>
}

Using `use server` inline

In the following example, use server is used inline at the top of a function to mark it as a 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} />
}

Security considerations

When using the use server directive, it's important to ensure that all server-side logic is secure and that sensitive data remains protected.

Authentication and authorization

Always authenticate and authorize users before performing sensitive server-side operations.

'use server'
 
import { db } from '@/lib/db' // Your database client
import { authenticate } from '@/lib/auth' // Your authentication library
 
export async function createUser(
  data: { name: string; email: string },
  token: string
) {
  const user = authenticate(token)
  if (!user) {
    throw new Error('Unauthorized')
  }
  const newUser = await db.user.create({ data })
  return newUser
}

Reference

See the React documentation for more information on use server.

use server

Using use server at the top of a file