use server
use server
ディレクティブは、関数またはファイルをサーバー側で実行することを指定します。ファイルの先頭で使用して、ファイル内のすべての関数をサーバー側とするか、関数の先頭でインラインで使用して、その関数をサーバー関数としてマークできます。これは React の機能です。
ファイルの先頭で use server
を使用する
以下の例は、ファイルの先頭に use server
ディレクティブがある場合を示しています。ファイル内のすべての関数はサーバー上で実行されます。
app/actions.ts
TypeScript
'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
ディレクティブを付けた専用のファイルにサーバー関数を作成する必要があります。これらのサーバー関数は、クライアントおよびサーバーコンポーネントにインポートして実行できます。
actions.ts
に fetchUsers
サーバー関数があると仮定します:
app/actions.ts
TypeScript
'use server'
import { db } from '@/lib/db' // データベースクライアント
export async function fetchUsers() {
const users = await db.user.findMany()
return users
}
その後、fetchUsers
サーバー関数をクライアントコンポーネントにインポートし、クライアント側で実行できます。
app/components/my-button.tsx
TypeScript
'use client'
import { fetchUsers } from '../actions'
export default function MyButton() {
return <button onClick={() => fetchUsers()}>ユーザーを取得</button>
}
インラインで use server
を使用する
次の例では、use server
を関数の先頭でインラインに使用して、サーバー関数としてマークしています:
app/page.tsx
TypeScript
import { db } from '@/lib/db' // データベースクライアント
export default function UserList() {
async function fetchUsers() {
'use server'
const users = await db.user.findMany()
return users
}
return <button onClick={() => fetchUsers()}>ユーザーを取得</button>
}
セキュリティに関する考慮事項
use server
ディレクティブを使用する場合、すべてのサーバー側のロジックが安全であり、機密データが保護されていることを確認することが重要です。
認証と認可
機密性の高いサーバー側の操作を実行する前に、常にユーザーを認証および認可してください。
app/actions.ts
TypeScript
'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
}
参考
詳細については、React ドキュメントの use server
を参照してください。