use server 指令用于指定函数或文件在服务器端执行。它既可以用于文件的顶部，以表明文件中所有函数都在服务器端执行，也可以内联在函数顶部，将该函数标记为 服务器函数。这是一个 React 特性。
use server以下示例展示了一个文件，其顶部带有 use 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
}'use server'
import { db } from '@/lib/db' // Your database client
export async function createUser(data) {
const user = await db.user.create({ data })
return user
}要在客户端组件中使用服务器函数，您需要在专用文件中创建服务器函数，并在文件顶部使用 use server 指令。这些服务器函数随后可以被导入到客户端和服务器组件中并执行。
假设您在 actions.ts 中有一个 fetchUsers 服务器函数：
'use server'
import { db } from '@/lib/db' // Your database client
export async function fetchUsers() {
const users = await db.user.findMany()
return users
}'use server'
import { db } from '@/lib/db' // Your database client
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()}>Fetch Users</button>
}'use client'
import { fetchUsers } from '../actions'
export default function MyButton() {
return <button onClick={() => fetchUsers()}>Fetch Users</button>
}use server在以下示例中，use server 内联用于函数顶部，以将其标记为 服务器函数：
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' // 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
}'use server'
import { db } from '@/lib/db' // Your database client
import { authenticate } from '@/lib/auth' // Your authentication library
export async function createUser(data, token) {
const user = authenticate(token)
if (!user) {
throw new Error('Unauthorized')
}
const newUser = await db.user.create({ data })
return newUser
}请参阅 React 文档 获取有关 use server 的更多信息。