فهم الحدود بين الخادم والعميل
يسمح React Server Components (RSC) بتشغيل المكونات على الخادم، مما يقلل من حجم الملفات ويزيد من أداء النظام. ولكن فهم عندما يجب استخدام المكونات الخادمية مقابل المكونات العميلية هو أمر حاسم.
أنماط التصميم
1. استرجاع البيانات على مستوى المكون
يمكن للمكونات الخادمية الوصول مباشرة إلى قواعد البيانات ومستخدمي الملفات وغيرها من الموارد الخدمية دون استخدام نقاط الوصول API.
async function ProductList() {
const products = await db.product.findMany({ where: { published: true } });
return (
<div className="grid grid-cols-3 gap-4">
{products.map(p => <ProductCard key={p.id} product={p} />)}
</div>
);
}2. إجراءات الخادم للتعديلات
إجراءات الخادم تسمح لك كتابة دوالية متزامنة يمكن تنفيذها على الخادم وتدعوها من المكونات العميلية.
"use server";
export async function createProduct(formData) {
const product = await db.product.create({ data: { name: formData.get("name") } });
revalidatePath("/products");
return { success: true, product };
}الخطوات الشائعة
- لا يمكن تمرير الدوال كمتغيرات من الخادم إلى المكونات العميلية
- لا يمكن استخدام useState أو useEffect في المكونات الخادمية
- أدرج "use client" في أدنى مستوى من شجرة المكونات
- لا يمكن للمكونات الخادمية التعامل مع التفاعلات المستخدمية - استخدم المكونات العميلية لذلك
تأثير الأداء
في تطبيقنا الحالي، تحويلنا إلى RSC قلل من حجم الملفات المصدرية بنسبة 35% وازداد وقت التفاعل بمقدار 40%. الفكرة الرئيسية: المكونات الخادمية ليست فقط عن أداء - هي عن وضوح التصميم المعماري.
النهاية
RSC هو تحول في النظرة، وليس مجرد ميزة. التفكير في حدود الخادم والعميل في قرارات التصميم المعماري المبكرة.
