إتقان مكونات خادم React: دليل شامل لتطبيقات الإنتاج

تمثّل مكوّنات خادم React (RSC) نقلة نوعية في طريقة بنائنا لتطبيقات React. فبعرض المكوّنات على الخادم وبثّ HTML إلى العميل، يمكننا تحقيق أداء غير مسبوق مع الحفاظ على تجربة المطوّر التي تشتهر بها React.

فهم مكوّنات الخادم مقابل مكوّنات العميل

التمييز الجوهري بسيط لكنه قوي:

• مكوّنات الخادم: تُعرَض على الخادم، بلا JavaScript من جانب العميل، ويمكنها الوصول مباشرةً إلى موارد الخلفية
• مكوّنات العميل: تُعرَض على العميل، تدعم التفاعلية، تستخدم الـ Hooks وواجهات المتصفّح

متى تستخدم كلاً منهما

// Server Component (default in Next.js 14+)
// app/products/page.tsx
async function ProductsPage() {
    const products = await db.products.findMany();

    return (
        <div>
            {products.map(product => (
                <ProductCard key={product.id} product={product} />
            ))}
        </div>
    );
}

// Client Component (add 'use client' directive)
// components/AddToCartButton.tsx
'use client'

import { useState } from 'react';

export function AddToCartButton({ productId }) {
    const [loading, setLoading] = useState(false);

    const handleClick = async () => {
        setLoading(true);
        await addToCart(productId);
        setLoading(false);
    };

    return (
        <button onClick={handleClick} disabled={loading}>
            {loading ? 'Adding...' : 'Add to Cart'}
        </button>
    );
}

أنماط جلب البيانات

تفتح مكوّنات الخادم أنماط جلب بيانات كفؤة كانت مستحيلة سابقاً:

1. جلب البيانات المتوازي

async function Dashboard() {
    // These requests happen in parallel
    const [user, stats, notifications] = await Promise.all([
        getUser(),
        getStats(),
        getNotifications()
    ]);

    return (
        <div>
            <UserProfile user={user} />
            <StatsPanel stats={stats} />
            <NotificationList items={notifications} />
        </div>
    );
}

2. البثّ مع Suspense

export default function Page() {
    return (
        <main>
            <h1>Dashboard</h1>
            <Suspense fallback={<StatsSkeleton />}>
                <Stats />
            </Suspense>
            <Suspense fallback={<ChartSkeleton />}>
                <Chart />
            </Suspense>
        </main>
    );
}

نصائح تحسين الأداء

1. قلّل مكوّنات العميل: أبقِ حدّ 'use client' منخفضاً قدر الإمكان في شجرة مكوّناتك
2. ضع جلب البيانات بجوار مستخدِمه: اجلب البيانات في المكوّن الذي يحتاجها، لا على مستوى الصفحة
3. استخدم حدود Suspense باستراتيجية: غلّف المكوّنات البطيئة لتمكين البثّ
4. استفد من التخزين المؤقت: استخدم التخزين المؤقت المدمج في Next.js لاستعلامات قاعدة البيانات واستدعاءات API

مزالق شائعة يجب تجنّبها

• استيراد مكتبات خاصة بالعميل عن طريق الخطأ في مكوّنات الخادم
• الإفراط في استخدام 'use client' عندما لا تحتاج المكوّنات إلى تفاعلية
• عدم معالجة حالات التحميل والخطأ بشكل سليم
• تجاهل حدّ التسلسل (serialization) بين الخادم والعميل

مكوّنات خادم React باقية وستصبح على الأرجح الطريقة الافتراضية لبناء تطبيقات React. أتقِنها الآن لتبقى في الطليعة.