في هذا الإصدار من Next.js، سوف نستكشف ماهية مكونات العميل والخادم، والاختلافات بينهما، ومتى يتم استخدام كل منهما، ونقدم أمثلة عملية لمساعدتك في تنفيذها في مشروعك. المشاريع.

ما هي مكونات العميل والخادم في Next.js؟

في Next.js، هناك تمييز واضح بين مكونات العميل ومكونات الخادم. يتيح لك هذا الفصل اتخاذ قرارات أفضل حول مكان وكيفية معالجة التعليمات البرمجية، مما يؤثر بشكل مباشر على الأداء وتجربة المستخدم.

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

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

الخصائص الرئيسية:

• تشغيل في المتصفح (العميل).
• الوصول إلى الخطافات مثل useState أو useEffect.
• يستخدم للتعامل مع التفاعلات الديناميكية مثل النماذج أو الأزرار.
• ضروري عندما تحتاج إلى الاستجابة بسرعة لإجراءات المستخدم.

مثال على مكون العميل:

'use client'; // Indicates that this component runs on the client

import { useState } from 'react';

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

  return (
    

      
Client-side Counter
      
The count value is: {count}
       setCount(count   1)}>Increment
    
  );
}

هذا المثال الكلاسيكي عبارة عن عداد يسمح للمستخدم بالتفاعل مباشرة مع الصفحة. "استخدام العميل"؛ يخبر التوجيه Next.js أنه يجب تنفيذ هذا المكون في المتصفح.

مكونات الخادم

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

الخصائص الرئيسية:

• يتم تقديمه على الخادم.
• لا يمكنك الوصول إلى واجهات برمجة تطبيقات المتصفح مثل النافذة أو المستند، ولا إلى خطافات React مثل useState.
• يمكن التفاعل مباشرة مع قواعد البيانات أو واجهات برمجة التطبيقات الخارجية.
• تحسين الأداء عن طريق إرسال HTML بدلاً من JavaScript إلى العميل.

مثال على مكون الخادم:

export default async function ServerComponent() {
  const data = await fetch('https://api.example.com/data').then(res => res.json());

  return (
    

      
Data from the Server
      
{data.message}
    
  );
}

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

ميزات جديدة في Next.js

يقوم Next.js بتحسين كيفية تفاعل مكونات الخادم والعميل. فيما يلي بعض أبرز التحسينات:

1. مكونات الخادم بشكل افتراضي

المكونات الآن هي مكونات الخادم بشكل افتراضي. وهذا يعني أن تطبيقك يتم تحسينه تلقائيًا عن طريق إرسال كمية أقل من JavaScript إلى المتصفح، ما لم تكن بحاجة صريحة إلى مكون العميل.

2. البث الأمثل

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

3. التحكم الدقيق

يسهل Next.js تحديد ما إذا كان سيتم تشغيل المكون على الخادم أو العميل، مما يمنحك مزيدًا من التحكم في كيفية تحسين تطبيقك.

4. تحسين الترطيب

الترطيب هي العملية التي تحول HTML الثابت المرسل من الخادم إلى صفحة تفاعلية على العميل. مع Next.js، يصبح الترطيب أكثر كفاءة وانتقائية، ولا يحدث إلا عند الضرورة القصوى.

متى يتم استخدام مكونات العميل مقابل مكونات الخادم

استخدم مكونات العميل عندما:

1. تفاعل المستخدم: عندما تحتاج إلى التعامل مع التفاعلات مثل النماذج أو الأزرار التي تستجيب في الوقت الفعلي.
2. إدارة الولاية: مثالية لإدارة الولايات المحلية التي تتغير ديناميكيًا، مثل عربة التسوق.
3. الرسوم المتحركة والمؤثرات البصرية: عند الاعتماد على الرسوم المتحركة أو التأثيرات التي يتم تحديثها بناءً على تفاعل المستخدم.

استخدم مكونات الخادم عندما:

1. استعلامات قاعدة البيانات: عندما تحتاج إلى جلب البيانات من قاعدة بيانات قبل عرض المحتوى.
2. المحتوى الثابت: مثالي عندما لا يتغير المحتوى بشكل متكرر ولا يتطلب التفاعل.
3. تحسين محركات البحث: أصبح المحتوى الذي يعرضه الخادم متاحًا بشكل أكبر لمحركات البحث، مما يعزز تحسين محركات البحث.

مثال على الجمع بين مكونات العميل والخادم:

// ServerComponent.tsx
export default async function ServerComponent() {
  const data = await fetch('https://api.example.com/products').then(res => res.json());

  return (
    

      
Product List (Server-rendered)
      

        {data.map((product: any) => (
          
{product.name}
        ))}
      
    
  );
}

// ClientComponent.tsx
'use client';

import { useState } from 'react';

export default function ClientComponent() {
  const [search, setSearch] = useState('');

  return (
    

       setSearch(e.target.value)}
        placeholder="Search product"
      />
      
Searching for: {search}
    
  );
}

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

خاتمة

يمثل Next.js نقطة تحول في كيفية تطوير تطبيقات الويب، وتحسين الأداء وتجربة المستخدم. يتيح لك الاستخدام الفعال لـ مكونات الخادم ومكونات العميل إنشاء تطبيقات سريعة وديناميكية مع تحميل أولي أخف.

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