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

كل المكونات التي كتبتها حتى الآن في هذا القسم كانت تعمل في مكان قد لا تكون لاحظته: على الخادم (server). هذا ليس وضعًا خاصًا قمت بتفعيله: بل هو الوضع الافتراضي، وهو الفكرة الأكبر على الإطلاق في Next.js.

هناك نوعان فقط من المكونات، وكل نوع منهما يمنحك شيئًا لا يمكن للآخر تقديمه.

مكونات الخادم (Server components): الوضع الافتراضي

• يتم تشغيلها مرة واحدة، على الخادم، قبل إرسال الصفحة
• يمكن أن تكون async، لذا يمكنها استخدام await للبيانات مباشرة داخل المكون
• لا ترسل أي JavaScript إلى المتصفح: يقوم المستخدم بتنزيل النتيجة، وليس الكود

المشكلة في ذلك: بحلول الوقت الذي تصل فيه الصفحة إلى المتصفح، يكون مكون المكون المعتمد على الخادم (server component) قد انتهى. إنه مجرد لقطة ثابتة (snapshot). لا يمكنه تذكر أي شيء، أو التفاعل مع النقر، أو التغيير.

مكونات Client: التفعيل الاختياري

عندما تحتاج إلى أن تجعل الصفحة تستجيب، يمكنك اختيار تضمين الملف في المتصفح عن طريق إضافة سطر واحد في الأعلى تماماً:

'use client';

هذا يحدد الملف كـ مكون عميل (client component)، وفقط مكونات العملاء هي من يمكنها استخدام:

• الدوال المباشرة (Hooks): useState، و useEffect، وأقرانها
• معالجات الأحداث (Event handlers): onClick، و onChange، …
• واجهات برمجة التطبيقات للمتصفح (Browser APIs): window، و localStorage

لاحظ الفرق. مكون الخادم (server component) سريع وهادئ ولكنه ثابت (frozen). مكون العميل (client component) حي وفعال ولكن يجب تنزيل الكود الخاص به وتشغيله في المتصفح.

لذا فإن السؤال الذي ستطرحه على نفسك بشأن كل مكون من الآن فصاعدًا ليس "أي مكون أعجبني؟" بل "هل يتطلب هذا الجزء المحدد الاستجابة للمستخدم؟" إذا كانت الإجابة لا (وهيكذ تكون في الغالب)، فاتركه على الخادم.