العودة للمقالات

إتقان مكونات React Server: دليل عملي مع أمثلة واقعية

Majd Muhtaseb05‏/06‏/202510 دقيقة

مقدمة

تعتبر مكونات React Server (RSCs) نقطة تحول في طريقة بناء تطبيقات React الخاصة بنا. إنها تسمح لنا بتنفيذ التعليمات البرمجية على الخادم، مما يحسن الأداء والأمان وأوقات التحميل الأولية. سيرشدك هذا الدليل عبر الأساسيات بأمثلة عملية.

ما هي مكونات React Server؟

على عكس مكونات جانب العميل التقليدية، يتم عرض RSCs على الخادم وترسل HTML الناتج فقط إلى العميل. هذا يقلل من كمية JavaScript التي يحتاج المتصفح إلى تنزيلها وتحليلها وتنفيذها.

فوائد استخدام مكونات React Server

• تحسين الأداء: تقليل JavaScript على العميل يؤدي إلى أوقات تحميل أولية أسرع.
• تعزيز الأمان: الوصول إلى البيانات الحساسة وتنفيذ العمليات على الخادم، مما يحافظ على مفاتيح API وبيانات اعتماد قاعدة البيانات آمنة.
• تبسيط جلب البيانات: جلب البيانات مباشرة داخل مكوناتك دون الحاجة إلى استدعاءات API منفصلة.

أمثلة عملية

جلب البيانات من قاعدة بيانات (مكون الخادم)

// app/components/UserList.jsx (مكون الخادم)
import { getUsers } from '@/lib/db'; // بافتراض أن لديك اتصالاً بقاعدة البيانات

export default async function UserList() {
  const users = await getUsers();

  return (
    <ul>
      {users.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

// lib/db.js (مثال على جلب البيانات من قاعدة البيانات - قم بتكييفه مع قاعدة بياناتك)
export async function getUsers() {
  // استبدل باتصال قاعدة البيانات الفعلي الخاص بك والاستعلام
  // مثال باستخدام عميل قاعدة بيانات وهمي:
  const client = await connectToDatabase();
  const users = await client.query('SELECT * FROM users');
  return users;
}

async function connectToDatabase() {
    // محاكاة اتصال بقاعدة البيانات (استبدل بالتنفيذ الفعلي الخاص بك)
    return {
        query: async (sql) => {
            // محاكاة استعلام قاعدة البيانات
            if (sql === 'SELECT * FROM users') {
                return [
                    { id: 1, name: 'Alice' },
                    { id: 2, name: 'Bob' },
                ];
            }
            return [];
        }
    };
}

شرح:

• المكون UserList هو RSC. تشير الكلمة الأساسية async إلى أنه يتم عرضه على الخادم.
• getUsers() يجلب البيانات من قاعدة البيانات. بشكل حاسم، يتم تنفيذ هذا الرمز على الخادم، وليس في المتصفح.

التفاعل مع مكونات العميل

في حين يتم عرض RSCs على الخادم، فستحتاج غالبًا إلى تفاعل من جانب العميل. لتحقيق ذلك، يمكنك الجمع بين RSCs ومكونات العميل.

// app/components/Counter.jsx (مكون العميل)
'use client'; // يحدد هذا كمكون عميل

import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>العداد: {count}</p>
      <button onClick={() => setCount(count + 1)}>زيادة</button>
    </div>
  );
}

// app/page.jsx (مكون الخادم)
import UserList from './components/UserList';
import Counter from './components/Counter';

export default async function Home() {
  return (
    <div>
      <h1>مرحباً</h1>
      <UserList />
      <Counter />
    </div>
  );
}

شرح:

• 'use client' في الجزء العلوي من Counter.jsx يخبر React أن هذا المكون يجب أن يتم عرضه على العميل.
• يستورد المكون Home (مكون الخادم) كلاً من UserList (مكون الخادم) و Counter (مكون العميل).
• Counter تفاعلي لأنه يستخدم JavaScript من جانب العميل (useState).

خاتمة

تعد مكونات React Server أداة قوية لبناء تطبيقات React عالية الأداء وآمنة وقابلة للصيانة. من خلال فهم فوائدها وكيفية استخدامها بفعالية، يمكنك تحسين سير عمل التطوير الخاص بك بشكل كبير وتجربة المستخدم. جرب هذه الأمثلة واستكشف كيف يمكن لـ RSCs أن تتناسب مع مشروعك التالي!