跳到主要內容
API 參考指令use server

use server

use server 指令指定函式或檔案在 **伺服器端** 執行。它可以放在檔案頂端，表示檔案中的所有函式都是伺服器端函式；也可以行內放在函式頂端，將該函式標記為 伺服器函式。這是 React 的功能。

在檔案頂端使用 use server

以下範例展示在檔案頂端使用 use server 指令。檔案中所有函式都會在伺服器端執行。

app/actions.ts
'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 伺服器函式

app/actions.ts
'use server'
import { db } from '@/lib/db' // Your database client
 
export async function fetchUsers() {
  const users = await db.user.findMany()
  return users
}

接著您可以將 fetchUsers 伺服器函式匯入到用戶端元件中，並在用戶端執行它。

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

行內使用 use server

在以下範例中，use server 行內用於函式頂端，將其標記為 伺服器函式

app/page.tsx
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>
}

安全性考量

當使用 use server 指令時，務必確保所有伺服器端邏輯都是安全的，並且敏感資料受到保護。

身份驗證與授權

在執行敏感的伺服器端操作之前，務必先驗證使用者身份並授權。

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

參考資料

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