Menu

use server

use server 指令用于指定在服务器端执行的函数或文件。它可以放在文件顶部，表示该文件中的所有函数都是服务器端的，也可以内联放在函数顶部，将该函数标记为服务器函数。这是一个 React 特性。

在文件顶部使用 use server

以下示例展示了在文件顶部使用 use server 指令。文件中的所有函数都将在服务器上执行。

app/actions.ts
TypeScript
'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 指令创建服务器函数。这些服务器函数随后可以被导入到客户端和服务器组件中并执行。

假设你在 actions.ts 中有一个 fetchUsers 服务器函数：

app/actions.ts
TypeScript
'use server'
import { db } from '@/lib/db' // 你的数据库客户端
 
export async function fetchUsers() {
  const users = await db.user.findMany()
  return users
}

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

app/components/my-button.tsx
TypeScript
'use client'
import { fetchUsers } from '../actions'
 
export default function MyButton() {
  return <button onClick={() => fetchUsers()}>获取用户</button>
}

内联使用 use server

在以下示例中，use server 内联使用在函数顶部，将其标记为服务器函数：

app/page.tsx
TypeScript
import { db } from '@/lib/db' // 你的数据库客户端
 
export default function UserList() {
  async function fetchUsers() {
    'use server'
    const users = await db.user.findMany()
    return users
  }
 
  return <button onClick={() => fetchUsers()}>获取用户</button>
}

安全性考虑

在使用 use server 指令时，确保所有服务器端逻辑都是安全的，并且敏感数据得到保护，这一点很重要。

身份验证和授权

在执行敏感的服务器端操作之前，始终要进行用户身份验证和授权。

app/actions.ts
TypeScript
'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
}

参考

查看 React 文档了解更多关于 use server 的信息。