use server

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

在文件顶部使用 use server

如下示例展示了在文件顶部添加 use server 指令的用法。该文件中的所有函数都将在服务端执行。

TypeScript

app/actions.ts

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

JavaScript

app/actions.js

'use server'
import { db } from '@/lib/db' // 你的数据库客户端

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

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

要在客户端组件中使用服务端函数，需要在专门的文件中使用 use server 指令定义服务端函数。然后可以在客户端和服务端组件中导入并调用这些服务端函数。

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

TypeScript

app/actions.ts

'use server'
import { db } from '@/lib/db' // 你的数据库客户端

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

JavaScript

app/actions.js

'use server'
import { db } from '@/lib/db' // 你的数据库客户端

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

然后你可以在客户端组件中导入 fetchUsers 并在客户端调用：

TypeScript

app/components/my-button.tsx

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

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

JavaScript

app/components/my-button.js

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

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

内联使用 use server

如下示例展示了在函数顶部内联使用 use server，将其标记为 服务端函数：

TypeScript

app/posts/[id]/page.tsx

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

JavaScript

app/posts/[id]/page.js

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 指令时，务必确保所有服务端逻辑的安全性，保护敏感数据。

认证与鉴权

在执行敏感的服务端操作前，务必对用户进行认证和鉴权。

TypeScript

app/actions.ts

'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('Unauthorized')
  }
  const newUser = await db.user.create({ data })
  return newUser
}

JavaScript

app/actions.js

'use server'

import { db } from '@/lib/db' // 你的数据库客户端
import { authenticate } from '@/lib/auth' // 你的认证库

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 的说明。