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
}'use server'
import { db } from '@/lib/db' // 你的資料庫客戶端
export async function createUser(data) {
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
}'use server'
import { db } from '@/lib/db' // 你的資料庫客戶端
export async function fetchUsers() {
const users = await db.user.findMany()
return users
}然後你可以將 fetchUsers 伺服器函式導入客戶端元件，並在客戶端執行它。
內聯使用 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} />
}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 指令時，務必確保所有伺服器端邏輯的安全性，並保護敏感資料。
身份驗證與授權
在執行敏感的伺服器端操作前，始終驗證使用者的身份並進行授權。
'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'
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('未經授權')
}
const newUser = await db.user.create({ data })
return newUser
}參考
更多關於 use server 的資訊，請參閱 React 文件。