使用服务器

use server 指令指定要在服务器端执行的函数或文件。它可以用在文件顶部，以指示文件中的所有函数都是服务器端的，或者内联在函数顶部以将该函数标记为 服务器功能。这是 React 功能。

¥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.

在文件顶部使用 use server

¥Using use server at the top of a file

以下示例显示了一个顶部带有 use server 指令的文件。文件中的所有函数都在服务器上执行。

¥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
}

'use server'
import { db } from '@/lib/db' // Your database client

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

在客户端组件中使用服务器函数

¥Using Server Functions in a Client Component

要在客户端组件中使用服务器功能，你需要使用文件顶部的 use server 指令在专用文件中创建服务器功能。然后可以将这些服务器函数导入客户端和服务器组件并执行。

¥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.

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

¥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
}

'use server'
import { db } from '@/lib/db' // Your database client

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

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

¥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>
}

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

export default function MyButton() {
  return <button onClick={() => fetchUsers()}>Fetch Users</button>
}

内联使用 use server

¥Using use server inline

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

¥In the following example, use server is used inline at the top of a function to mark it as a Server Function:

import { db } from '@/lib/db' // Your database client

export default function UserList() {
  async function fetchUsers() {
    'use server'
    const users = await db.user.findMany()
    return users
  }

  return <button onClick={() => fetchUsers()}>Fetch Users</button>
}

import { db } from '@/lib/db' // Your database client

export default function UserList() {
  async function fetchUsers() {
    'use server'
    const users = await db.user.findMany()
    return users
  }

  return <button onClick={() => fetchUsers()}>Fetch Users</button>
}

安全注意事项

¥Security considerations

使用 use server 指令时，重要的是确保所有服务器端逻辑都是安全的，并且敏感数据仍然受到保护。

¥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
}

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

参考

¥Reference

有关 use server 的更多信息，请参阅 React 文档。

¥See the React documentation for more information on use server.