use server

use server 指令用於標記函式或檔案在伺服器端執行。可以在檔案頂部使用，表示該檔案中的所有函式都是伺服器端函式；也可以在函式頂部內聯使用，將該函式標記為伺服器函式 (Server Function)。這是 React 的一項功能。

在檔案頂部使用 `use server`

以下範例展示了一個在頂部帶有 use server 指令的檔案。該檔案中的所有函式都會在伺服器端執行。

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

在客戶端元件中使用伺服器函式

要在客戶端元件 (Client Components) 中使用伺服器函式，你需要在專用檔案中使用 use server 指令建立伺服器函式。這些伺服器函式隨後可以被導入客戶端和伺服器元件並執行。

假設你在 actions.ts 中有一個 fetchUsers 伺服器函式：

'use server'
import { db } from '@/lib/db' // 你的資料庫客戶端

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()}>取得使用者</button>
}

內聯使用 `use server`

在以下範例中，use server 在函式頂部內聯使用，將其標記為伺服器函式 (Server Function)：

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' // 你的資料庫客戶端
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
}

參考

更多關於 use server 的資訊，請參閱 React 文件。

在檔案頂部使用 use server

在客戶端元件中使用伺服器函式

內聯使用 use server

安全性考量

身份驗證與授權

參考

On this page

在檔案頂部使用 `use server`

內聯使用 `use server`