React 19 مكونات الخادم: ما الذي تغير ولماذا

يعد React 19 هو الإصدار الأكثر أهمية منذ الخطافات. مكونات الخادم، التي بدأت كميزة تجريبية في React 18، أصبحت الآن مستقرة ومتكاملة تمامًا مع نموذج العرض المتزامن. لكن التغييرات تذهب إلى ما هو أبعد من مجرد تثبيت RSC - يقدم React 19 إجراءات وخطاف use() جديد وتكامل النماذج وتحديثات متفائلة وإدارة بيانات تعريف المستندات التي تغير بشكل جماعي طريقة تفكيرك في تدفق البيانات في تطبيقات React.

يركز هذا الدليل على ما تغير بالفعل بين React 18 و19، ويشرح المنطق المعماري وراء كل تغيير، ويوضح أنماط الإنتاج التي تحل محل الأساليب القديمة.

الوجبات الرئيسية

تعمل مكونات الخادم على الخادم فقط - وليس لها دورة حياة ولا حالة ولا واجهات برمجة تطبيقات للمتصفح

يحل الخطاف use() محل await في مكونات العميل لاستهلاك الوعود والسياق

تحل إجراءات React 19 محل الأنماط اليدوية useState + fetch لعمليات إرسال النماذج

useOptimistic يتيح تحديثات واجهة المستخدم الفورية قبل تأكيد الخادم

useFormStatus يمنحك حالة معلقة بدون حفر الدعامات خلال مكونات النموذج

تتيح لك واجهات برمجة التطبيقات للتحميل المسبق للأصول (preload، preinit) التحكم في تحميل الموارد من المكونات

يتم رفع العلامات <title> و<meta> و<link> الموجودة في المكونات تلقائيًا إلى <head>

تشكل مكونات الخادم ومكونات العميل شجرة - لا يمكن لمكونات العميل استيراد مكونات الخادم

ما هي مكونات الخادم فعليًا؟

قبل مناقشة ما تغير، وضح ماهية مكونات الخادم: تفاعل المكونات التي يتم عرضها حصريًا على الخادم وإنتاج حمولة HTML + RSC التي يرطبها العميل. وهي ليست مثل مكونات العميل المقدمة من جانب الخادم.

الاختلافات الرئيسية:

	مكونات الخادم	مكونات العميل
يعمل على	الخادم فقط	الخادم (العرض الأولي) + العميل
يمكن استخدام السنانير	لا	نعم
يمكن استخدام واجهات برمجة تطبيقات المتصفح	لا	نعم
يمكن الوصول إلى قاعدة البيانات	نعم (مباشرة)	لا (عبر API)
تأثير حجم الحزمة	صفر	نعم
يمكن أن يكون غير متزامن	نعم	لا (بدون تشويق)

// Server Component — async, no hooks, direct DB access
async function UserProfile({ userId }: { userId: string }) {
  // Direct database query — no API needed
  const user = await db.query.users.findFirst({
    where: eq(users.id, userId),
  });

  return (
    <div>
      <h1>{user.name}</h1>
      {/* Client Component gets data as props */}
      <UserActions userId={user.id} role={user.role} />
    </div>
  );
}

// Client Component — can use hooks, handles interactions
'use client';

function UserActions({ userId, role }: { userId: string; role: string }) {
  const [isEditing, setIsEditing] = useState(false);

  return (
    <div>
      <button onClick={() => setIsEditing(true)}>Edit</button>
      {isEditing && <EditUserForm userId={userId} />}
    </div>
  );
}

رد الفعل 19 الإجراءات

أكبر تحسين مريح في React 19 هو الإجراءات - وهي طريقة موحدة للتعامل مع العمليات غير المتزامنة الناتجة عن تفاعلات المستخدم، وخاصة عمليات إرسال النماذج.

قبل React 19، كانت معالجة النماذج نموذجية متكررة:

// React 18 — manual state management
function ContactForm() {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [submitting, setSubmitting] = useState(false);
  const [error, setError] = useState<string | null>(null);

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    setSubmitting(true);
    setError(null);

    try {
      await createContact({ name, email });
    } catch (err) {
      setError(err.message);
    } finally {
      setSubmitting(false);
    }
  }

  return (
    <form onSubmit={handleSubmit}>
      {/* ... */}
    </form>
  );
}

تعمل إجراءات React 19 على تبسيط هذا الأمر بشكل كبير:

// React 19 — useActionState
'use client';

import { useActionState } from 'react';

async function createContactAction(
  prevState: { error?: string },
  formData: FormData
) {
  'use server'; // Server Action — runs on the server

  const name = formData.get('name') as string;
  const email = formData.get('email') as string;

  try {
    await createContact({ name, email });
    return { success: true };
  } catch (err) {
    return { error: err.message };
  }
}

function ContactForm() {
  const [state, formAction, isPending] = useActionState(
    createContactAction,
    {}
  );

  return (
    <form action={formAction}>
      <input name="name" required />
      <input name="email" type="email" required />
      {state.error && <p className="text-red-500">{state.error}</p>}
      <button type="submit" disabled={isPending}>
        {isPending ? 'Submitting...' : 'Submit'}
      </button>
    </form>
  );
}

يقوم الخطاف useActionState بإدارة الحالة المعلقة وبيانات النموذج ومعالجة الأخطاء في مكان واحد. يشير التوجيه 'use server' الموجود في وظيفة الإجراء إلى أنه إجراء خادم - فهو يعمل على الخادم، ويمكنه الوصول إلى قاعدة البيانات مباشرة، ولا يرى العميل التنفيذ أبدًا.

إجراءات الخادم

إجراءات الخادم هي وظائف غير متزامنة مع التوجيه 'use server' والتي يتم تشغيلها على الخادم عند استدعائها من العميل. إنها تحل محل مسارات واجهة برمجة التطبيقات (API) لمعظم حالات استخدام طفرة البيانات:

// app/actions/contacts.ts
'use server';

import { revalidatePath } from 'next/cache';
import { redirect } from 'next/navigation';
import { db } from '@ecosire/db';
import { contacts } from '@ecosire/db/schema';

export async function createContact(formData: FormData) {
  const name = formData.get('name') as string;
  const email = formData.get('email') as string;

  if (!name || !email) {
    throw new Error('Name and email are required');
  }

  await db.insert(contacts).values({
    name,
    email,
    organizationId: await getOrganizationId(), // From session
  });

  revalidatePath('/dashboard/contacts'); // Invalidate cached page
  redirect('/dashboard/contacts'); // Redirect after success
}

يمكن استخدام إجراءات الخادم مباشرةً في عناصر form:

import { createContact } from '@/app/actions/contacts';

export default function NewContactPage() {
  return (
    <form action={createContact}>
      <input name="name" placeholder="Name" required />
      <input name="email" placeholder="Email" type="email" required />
      <button type="submit">Create Contact</button>
    </form>
  );
}

لا يوجد معالج onSubmit، لا preventDefault()، لا يوجد دليل fetch() - النموذج يعمل فقط.

الاستخدام () هوك

يقدم React 19 الخطاف use() لاستهلاك الموارد (الوعود والسياق) داخل العرض. على عكس await، فهو يعمل مع نظام التشويق الخاص بـ React:

// Before React 19 — had to resolve at the top level
export default async function Page() {
  const posts = await getPosts(); // Blocks entire page
  return <PostList posts={posts} />;
}

// React 19 — pass a promise, resolve with use()
export default function Page() {
  const postsPromise = getPosts(); // Start fetch immediately

  return (
    <Suspense fallback={<PostsSkeleton />}>
      <PostList postsPromise={postsPromise} />
    </Suspense>
  );
}

// Client Component using use() to consume the promise
'use client';

function PostList({ postsPromise }: { postsPromise: Promise<Post[]> }) {
  const posts = use(postsPromise); // Suspends until resolved

  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

يستبدل الخطاف use() أيضًا useContext() — حيث يمكنه استهلاك السياق بشكل مشروط (على عكس الخطافات، يمكن استدعاء use() داخل الشروط والحلقات):

'use client';

import { use } from 'react';
import { ThemeContext } from '@/contexts/theme';

function Button({ children }: { children: React.ReactNode }) {
  const theme = use(ThemeContext); // Can be inside conditions

  return (
    <button className={theme === 'dark' ? 'bg-gray-800' : 'bg-white'}>
      {children}
    </button>
  );
}

تحديثات متفائلة مع useOptimistic

يوفر useOptimistic تعليقات فورية لواجهة المستخدم قبل اكتمال عملية الخادم، ويعود تلقائيًا في حالة فشل العملية:

'use client';

import { useOptimistic, useTransition } from 'react';

interface Like {
  id: string;
  count: number;
  userLiked: boolean;
}

function LikeButton({ postId, initialLikes }: { postId: string; initialLikes: Like }) {
  const [likes, setOptimisticLikes] = useOptimistic(
    initialLikes,
    (state, action: 'like' | 'unlike') => ({
      ...state,
      count: action === 'like' ? state.count + 1 : state.count - 1,
      userLiked: action === 'like',
    })
  );

  const [isPending, startTransition] = useTransition();

  async function toggleLike() {
    const action = likes.userLiked ? 'unlike' : 'like';

    startTransition(async () => {
      setOptimisticLikes(action); // Instant UI update

      // Server operation — if this fails, optimistic state reverts
      await togglePostLike(postId, action);
    });
  }

  return (
    <button onClick={toggleLike} disabled={isPending}>
      {likes.userLiked ? '♥' : '♡'} {likes.count}
    </button>
  );
}

يظهر التحديث المتفائل على الفور، ثم يتم الالتزام (نجاح الخادم) أو التراجع (فشل الخادم). يحصل المستخدمون على تعليقات فورية دون انتظار رحلات الشبكة ذهابًا وإيابًا.

بيانات تعريف المستند من المكونات

يسمح React 19 بعرض علامات <title> و<meta> و<link> داخل أي مكون - حيث يتم رفعها تلقائيًا إلى المستند <head>:

// Server Component — metadata hoists to <head> automatically
async function BlogPost({ slug }: { slug: string }) {
  const post = await getPost(slug);

  return (
    <article>
      <title>{post.title}</title>
      <meta name="description" content={post.description} />
      <link rel="canonical" href={`https://ecosire.com/blog/${slug}`} />

      <h1>{post.title}</h1>
      <div>{post.content}</div>
    </article>
  );
}

يعمل هذا في كل من مكونات الخادم والعميل. في أطر عمل مثل Next.js، ستظل تستخدم generateMetadata() للتحكم الكامل في علامات OpenGraph وسمات hreflang — يعد الدعم الأصلي لـ React 19 أكثر أساسية. ولكن في الحالات البسيطة، فإنه يلغي الحاجة إلى next/head أو مكتبات مماثلة.

واجهات برمجة التطبيقات لتحميل الأصول

يوفر React 19 واجهات برمجة تطبيقات واضحة للتحميل المسبق للموارد، مما يمنحك تحكمًا دقيقًا في شلال تحميل الموارد:

import { preload, preinit, prefetchDNS, preconnect } from 'react-dom';

function BelowFoldSection() {
  // When this component renders, preload the hero image for next section
  preload('/images/hero-next.webp', { as: 'image' });

  // Preinit a script (loads and executes immediately)
  preinit('https://cdn.example.com/analytics.js', { as: 'script' });

  // DNS prefetch for external resources
  prefetchDNS('https://fonts.googleapis.com');

  // Establish connection early
  preconnect('https://api.ecosire.com');

  return <section>{/* content */}</section>;
}

تعمل واجهات برمجة التطبيقات هذه بشكل صحيح مع نموذج عرض React — فهي تجمع تلميحات الموارد وتصدرها عند النقطة المثالية في المستند، حتى من أعماق شجرة المكونات.

المخاطر والحلول الشائعة

المأزق 1: محاولة استخدام الخطافات في مكونات الخادم

لا يمكن لمكونات الخادم استخدام useState، أو useEffect، أو useContext، أو أي ربط آخر. إذا كنت بحاجة إليها، أضف 'use client' إلى المكون. الخطأ عادة هو: Error: Hooks can only be called inside a function component.

المأزق 2: استيراد مكونات الخادم من مكونات العميل

لا يمكن لمكونات العميل استيراد مكونات الخادم (والعكس جيد). وذلك لأن مكونات العميل تعمل في المتصفح حيث لا توجد مكونات الخادم. إذا كنت بحاجة إلى إنشائها، فقم بتمرير مكونات الخادم كخاصيات children:

// Wrong — Client Component cannot import Server Component
'use client';
import { ServerUserProfile } from './server-user-profile'; // Error

// Correct — pass as children from a Server Component parent
// Parent (Server):
<ClientShell>
  <ServerUserProfile userId={userId} />
</ClientShell>

// ClientShell:
'use client';
function ClientShell({ children }: { children: React.ReactNode }) {
  return <div className="shell">{children}</div>;
}

المأزق 3: أخطاء التسلسل عند تمرير الدعائم من الخادم إلى العميل

يمكن فقط للبيانات القابلة للتسلسل JSON عبور حدود الخادم والعميل كدعائم. لا يمكن إجراء تسلسل للوظائف ومثيلات الفئة والخريطة والمجموعة والتواريخ (ككائنات). تحويل التواريخ إلى سلاسل ISO؛ استبدال الوظائف بمعرفات السلسلة.

المأزق 4: إجراءات الخادم لا تتحقق من صحة الإدخال

لا تثق مطلقًا بالبيانات المقدمة من العميل في إجراءات الخادم. تحقق دائمًا من Zod أو ما شابه قبل الكتابة إلى قاعدة البيانات:

'use server';

import { z } from 'zod';

const schema = z.object({
  name: z.string().min(2).max(255),
  email: z.string().email(),
});

export async function createContact(formData: FormData) {
  const result = schema.safeParse({
    name: formData.get('name'),
    email: formData.get('email'),
  });

  if (!result.success) {
    return { error: result.error.flatten().fieldErrors };
  }

  await db.insert(contacts).values(result.data);
}

الأسئلة المتداولة

هل مكونات الخادم متاحة خارج Next.js؟

تعد مكونات React Server إحدى ميزات React، ولكنها تتطلب إطار عمل للتعامل مع البنية الأساسية لعرض الخادم - التوجيه، والتجميع، والتدفق. Next.js App Router هو التطبيق الأكثر نضجًا. تضيف الإعدادات المستندة إلى Remix وAstro وVite دعم RSC. يتطلب استخدام RSC بدون إطار عمل عملًا كبيرًا في البنية التحتية المخصصة.

كيف يمكن مقارنة إجراءات الخادم بمسارات REST API؟

تعتبر إجراءات الخادم أكثر بساطة بالنسبة للطفرات الموجودة مع واجهة المستخدم - لا يوجد عنوان URL لنقطة النهاية لإدارته، ولا يوجد استدعاء fetch() للكتابة، ولا يوجد خطأ في التعامل مع النموذج المعياري. تعد مسارات REST API أفضل للعمليات التي يتم استدعاؤها من خارج تطبيق الويب (تطبيقات الجوال، وخطافات الويب، وعمليات تكامل الجهات الخارجية)، ولواجهات برمجة التطبيقات العامة التي تحتاج إلى وثائق، وعندما تحتاج إلى رموز حالة HTTP صريحة. استخدمهما في نفس التطبيق بناءً على حالة الاستخدام.

ما هو تأثير أداء مكونات الخادم؟

تعمل مكونات الخادم على تقليل حجم حزمة JavaScript (لا يتم شحن كود المكون إلى المتصفح أبدًا)، والتخلص من جلب البيانات من جانب العميل، وتمكين تسليم تدفق HTML عبر Suspense. والمقايضة هي تكلفة حساب الخادم - يحدث العرض على خوادمك، وليس على جهاز العميل. بالنسبة للصفحات ذات البيانات الثقيلة، يكون هذا دائمًا بمثابة فوز صافٍ.

هل يمكنني مزج React 18 وReact 19 في قاعدة التعليمات البرمجية؟

تعمل جميع أكواد React البرمجية كإصدار React 19 — ولا يوجد إصدار لكل ملف. السؤال هو ما إذا كان كود React 18 الموجود لديك يعمل في React 19. معظم أكواد React 18 تعمل دون تغيير. التغييرات الرئيسية تتعلق بالمراجع (أصبحت الآن دعامة عادية)، وإزالة ReactDOM.render، وبعض التغييرات في الكتابة في @types/react. قم بتشغيل React 19 codemods للترحيل الآلي.

كيف يمكنني اختبار مكونات الخادم؟

يمكن اختبار مكونات الخادم باستخدام مكتبة اختبار React باستخدام غير متزامن render. بالنسبة لإجراءات الخادم، اختبرها كوظائف غير متزامنة عادية مع استدعاءات قاعدة البيانات الساخرة. تغطي الاختبارات الشاملة مع Playwright التكامل الكامل لمكون الخادم + مكون العميل دون أي إعداد خاص - فهي تختبر مخرجات HTML النهائية.

الخطوات التالية

تمثل مكونات خادم React 19 تحولًا أساسيًا في كيفية إنشاء تطبيقات الويب الحديثة. قام فريق الواجهة الأمامية في ECOSIRE ببناء تطبيقات الإنتاج على هذه البنية - 249 صفحة تحتوي على مكونات الخادم وإجراءات الخادم والتحديثات المتفائلة التي تعمل على تشغيل سير عمل المستخدم الحقيقي.

إذا كنت بحاجة إلى مساعدة في الترحيل من React 18 إلى 19، أو تصميم تطبيق RSC-first جديد، أو تريد فقط هندسة الواجهة الأمامية المتخصصة في فريقك، استكشف خدمات التطوير لدينا.

React 19 مكونات الخادم: ما الذي تغير ولماذا

الوجبات الرئيسية

تعمل مكونات الخادم على الخادم فقط - وليس لها دورة حياة ولا حالة ولا واجهات برمجة تطبيقات للمتصفح

يحل الخطاف use() محل await في مكونات العميل لاستهلاك الوعود والسياق

تحل إجراءات React 19 محل الأنماط اليدوية useState + fetch لعمليات إرسال النماذج

useOptimistic يتيح تحديثات واجهة المستخدم الفورية قبل تأكيد الخادم

useFormStatus يمنحك حالة معلقة بدون حفر الدعامات خلال مكونات النموذج

تتيح لك واجهات برمجة التطبيقات للتحميل المسبق للأصول (preload، preinit) التحكم في تحميل الموارد من المكونات

يتم رفع العلامات <title> و<meta> و<link> الموجودة في المكونات تلقائيًا إلى <head>

تشكل مكونات الخادم ومكونات العميل شجرة - لا يمكن لمكونات العميل استيراد مكونات الخادم

ما هي مكونات الخادم فعليًا؟

الاختلافات الرئيسية:

	مكونات الخادم	مكونات العميل
يعمل على	الخادم فقط	الخادم (العرض الأولي) + العميل
يمكن استخدام السنانير	لا	نعم
يمكن استخدام واجهات برمجة تطبيقات المتصفح	لا	نعم
يمكن الوصول إلى قاعدة البيانات	نعم (مباشرة)	لا (عبر API)
تأثير حجم الحزمة	صفر	نعم
يمكن أن يكون غير متزامن	نعم	لا (بدون تشويق)

// Server Component — async, no hooks, direct DB access
async function UserProfile({ userId }: { userId: string }) {
  // Direct database query — no API needed
  const user = await db.query.users.findFirst({
    where: eq(users.id, userId),
  });

  return (
    <div>
      <h1>{user.name}</h1>
      {/* Client Component gets data as props */}
      <UserActions userId={user.id} role={user.role} />
    </div>
  );
}

// Client Component — can use hooks, handles interactions
'use client';

function UserActions({ userId, role }: { userId: string; role: string }) {
  const [isEditing, setIsEditing] = useState(false);

  return (
    <div>
      <button onClick={() => setIsEditing(true)}>Edit</button>
      {isEditing && <EditUserForm userId={userId} />}
    </div>
  );
}

رد الفعل 19 الإجراءات

قبل React 19، كانت معالجة النماذج نموذجية متكررة:

// React 18 — manual state management
function ContactForm() {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [submitting, setSubmitting] = useState(false);
  const [error, setError] = useState<string | null>(null);

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    setSubmitting(true);
    setError(null);

    try {
      await createContact({ name, email });
    } catch (err) {
      setError(err.message);
    } finally {
      setSubmitting(false);
    }
  }

  return (
    <form onSubmit={handleSubmit}>
      {/* ... */}
    </form>
  );
}

تعمل إجراءات React 19 على تبسيط هذا الأمر بشكل كبير:

// React 19 — useActionState
'use client';

import { useActionState } from 'react';

async function createContactAction(
  prevState: { error?: string },
  formData: FormData
) {
  'use server'; // Server Action — runs on the server

  const name = formData.get('name') as string;
  const email = formData.get('email') as string;

  try {
    await createContact({ name, email });
    return { success: true };
  } catch (err) {
    return { error: err.message };
  }
}

function ContactForm() {
  const [state, formAction, isPending] = useActionState(
    createContactAction,
    {}
  );

  return (
    <form action={formAction}>
      <input name="name" required />
      <input name="email" type="email" required />
      {state.error && <p className="text-red-500">{state.error}</p>}
      <button type="submit" disabled={isPending}>
        {isPending ? 'Submitting...' : 'Submit'}
      </button>
    </form>
  );
}

إجراءات الخادم

// app/actions/contacts.ts
'use server';

import { revalidatePath } from 'next/cache';
import { redirect } from 'next/navigation';
import { db } from '@ecosire/db';
import { contacts } from '@ecosire/db/schema';

export async function createContact(formData: FormData) {
  const name = formData.get('name') as string;
  const email = formData.get('email') as string;

  if (!name || !email) {
    throw new Error('Name and email are required');
  }

  await db.insert(contacts).values({
    name,
    email,
    organizationId: await getOrganizationId(), // From session
  });

  revalidatePath('/dashboard/contacts'); // Invalidate cached page
  redirect('/dashboard/contacts'); // Redirect after success
}

يمكن استخدام إجراءات الخادم مباشرةً في عناصر form:

import { createContact } from '@/app/actions/contacts';

export default function NewContactPage() {
  return (
    <form action={createContact}>
      <input name="name" placeholder="Name" required />
      <input name="email" placeholder="Email" type="email" required />
      <button type="submit">Create Contact</button>
    </form>
  );
}

لا يوجد معالج onSubmit، لا preventDefault()، لا يوجد دليل fetch() - النموذج يعمل فقط.

الاستخدام () هوك

// Before React 19 — had to resolve at the top level
export default async function Page() {
  const posts = await getPosts(); // Blocks entire page
  return <PostList posts={posts} />;
}

// React 19 — pass a promise, resolve with use()
export default function Page() {
  const postsPromise = getPosts(); // Start fetch immediately

  return (
    <Suspense fallback={<PostsSkeleton />}>
      <PostList postsPromise={postsPromise} />
    </Suspense>
  );
}

// Client Component using use() to consume the promise
'use client';

function PostList({ postsPromise }: { postsPromise: Promise<Post[]> }) {
  const posts = use(postsPromise); // Suspends until resolved

  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

'use client';

import { use } from 'react';
import { ThemeContext } from '@/contexts/theme';

function Button({ children }: { children: React.ReactNode }) {
  const theme = use(ThemeContext); // Can be inside conditions

  return (
    <button className={theme === 'dark' ? 'bg-gray-800' : 'bg-white'}>
      {children}
    </button>
  );
}

تحديثات متفائلة مع useOptimistic

يوفر useOptimistic تعليقات فورية لواجهة المستخدم قبل اكتمال عملية الخادم، ويعود تلقائيًا في حالة فشل العملية:

'use client';

import { useOptimistic, useTransition } from 'react';

interface Like {
  id: string;
  count: number;
  userLiked: boolean;
}

function LikeButton({ postId, initialLikes }: { postId: string; initialLikes: Like }) {
  const [likes, setOptimisticLikes] = useOptimistic(
    initialLikes,
    (state, action: 'like' | 'unlike') => ({
      ...state,
      count: action === 'like' ? state.count + 1 : state.count - 1,
      userLiked: action === 'like',
    })
  );

  const [isPending, startTransition] = useTransition();

  async function toggleLike() {
    const action = likes.userLiked ? 'unlike' : 'like';

    startTransition(async () => {
      setOptimisticLikes(action); // Instant UI update

      // Server operation — if this fails, optimistic state reverts
      await togglePostLike(postId, action);
    });
  }

  return (
    <button onClick={toggleLike} disabled={isPending}>
      {likes.userLiked ? '♥' : '♡'} {likes.count}
    </button>
  );
}

بيانات تعريف المستند من المكونات

يسمح React 19 بعرض علامات <title> و<meta> و<link> داخل أي مكون - حيث يتم رفعها تلقائيًا إلى المستند <head>:

// Server Component — metadata hoists to <head> automatically
async function BlogPost({ slug }: { slug: string }) {
  const post = await getPost(slug);

  return (
    <article>
      <title>{post.title}</title>
      <meta name="description" content={post.description} />
      <link rel="canonical" href={`https://ecosire.com/blog/${slug}`} />

      <h1>{post.title}</h1>
      <div>{post.content}</div>
    </article>
  );
}

واجهات برمجة التطبيقات لتحميل الأصول

يوفر React 19 واجهات برمجة تطبيقات واضحة للتحميل المسبق للموارد، مما يمنحك تحكمًا دقيقًا في شلال تحميل الموارد:

import { preload, preinit, prefetchDNS, preconnect } from 'react-dom';

function BelowFoldSection() {
  // When this component renders, preload the hero image for next section
  preload('/images/hero-next.webp', { as: 'image' });

  // Preinit a script (loads and executes immediately)
  preinit('https://cdn.example.com/analytics.js', { as: 'script' });

  // DNS prefetch for external resources
  prefetchDNS('https://fonts.googleapis.com');

  // Establish connection early
  preconnect('https://api.ecosire.com');

  return <section>{/* content */}</section>;
}

المخاطر والحلول الشائعة

المأزق 1: محاولة استخدام الخطافات في مكونات الخادم

المأزق 2: استيراد مكونات الخادم من مكونات العميل

// Wrong — Client Component cannot import Server Component
'use client';
import { ServerUserProfile } from './server-user-profile'; // Error

// Correct — pass as children from a Server Component parent
// Parent (Server):
<ClientShell>
  <ServerUserProfile userId={userId} />
</ClientShell>

// ClientShell:
'use client';
function ClientShell({ children }: { children: React.ReactNode }) {
  return <div className="shell">{children}</div>;
}

المأزق 3: أخطاء التسلسل عند تمرير الدعائم من الخادم إلى العميل

المأزق 4: إجراءات الخادم لا تتحقق من صحة الإدخال

'use server';

import { z } from 'zod';

const schema = z.object({
  name: z.string().min(2).max(255),
  email: z.string().email(),
});

export async function createContact(formData: FormData) {
  const result = schema.safeParse({
    name: formData.get('name'),
    email: formData.get('email'),
  });

  if (!result.success) {
    return { error: result.error.flatten().fieldErrors };
  }

  await db.insert(contacts).values(result.data);
}

الأسئلة المتداولة

هل مكونات الخادم متاحة خارج Next.js؟

كيف يمكن مقارنة إجراءات الخادم بمسارات REST API؟

ما هو تأثير أداء مكونات الخادم؟

هل يمكنني مزج React 18 وReact 19 في قاعدة التعليمات البرمجية؟

كيف يمكنني اختبار مكونات الخادم؟

React 19 Server Components: What Changed and Why

React 19 مكونات الخادم: ما الذي تغير ولماذا

ما هي مكونات الخادم فعليًا؟

رد الفعل 19 الإجراءات

إجراءات الخادم

الاستخدام () هوك

تحديثات متفائلة مع useOptimistic

بيانات تعريف المستند من المكونات

واجهات برمجة التطبيقات لتحميل الأصول

المخاطر والحلول الشائعة

الأسئلة المتداولة

الخطوات التالية

مقالات ذات صلة

k6 Load Testing: Stress-Test Your APIs Before Launch

Next.js 16 App Router: Production Patterns and Pitfalls

Odoo Performance Tuning: PostgreSQL and Server Optimization

المزيد من Performance & Scalability

k6 Load Testing: Stress-Test Your APIs Before Launch

Nginx Production Configuration: SSL, Caching, and Security

Odoo Performance Tuning: PostgreSQL and Server Optimization

Odoo vs Acumatica: Cloud ERP for Growing Businesses

Testing and Monitoring AI Agents in Production

Compliance Monitoring Agents with OpenClaw

React 19 Server Components: What Changed and Why

React 19 مكونات الخادم: ما الذي تغير ولماذا

ما هي مكونات الخادم فعليًا؟

رد الفعل 19 الإجراءات

إجراءات الخادم

الاستخدام () هوك

تحديثات متفائلة مع useOptimistic

بيانات تعريف المستند من المكونات

واجهات برمجة التطبيقات لتحميل الأصول

المخاطر والحلول الشائعة

الأسئلة المتداولة

الخطوات التالية

مقالات ذات صلة

k6 Load Testing: Stress-Test Your APIs Before Launch

Next.js 16 App Router: Production Patterns and Pitfalls

Odoo Performance Tuning: PostgreSQL and Server Optimization

المزيد من Performance & Scalability

k6 Load Testing: Stress-Test Your APIs Before Launch

Nginx Production Configuration: SSL, Caching, and Security

Odoo Performance Tuning: PostgreSQL and Server Optimization

Odoo vs Acumatica: Cloud ERP for Growing Businesses

Testing and Monitoring AI Agents in Production

Compliance Monitoring Agents with OpenClaw