Sponsor
ChatHubChatHub — Use GPT-4, Gemini, Claude 3.5 and more chatbots side-by-side
ここをクリック
Menu

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 を参照してください。