استخدام 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
}

استخدام وظائف الخادم في مكون العميل

لاستخدام وظائف الخادم في مكونات العميل، تحتاج إلى إنشاء وظائف الخادم الخاصة بك في ملف مخصص باستخدام توجيه use server في أعلى الملف. يمكن بعد ذلك استيراد هذه الوظائف إلى مكونات العميل والخادم وتنفيذها.

بافتراض أن لديك وظيفة خادم fetchUsers في actions.ts:

'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 client'
import { fetchUsers } from '../actions'

export default function MyButton() {
  return <button onClick={() => fetchUsers()}>جلب المستخدمين</button>
}

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

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
}

مرجع

راجع وثائق React لمزيد من المعلومات حول use server.

استخدام use server في أعلى الملف