use server

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 指令。然后，这些服务器函数可以被导入到客户端和服务器组件中并执行。

假设您在 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
}

然后您可以将 fetchUsers 服务器函数导入到客户端组件中并在客户端执行。

'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} />
}

安全注意事项

使用 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 的更多信息，请参阅 React 文档。