مكونات الخادم (Server Components)

تسمح لك مكونات الخادم (Server Components) بكتابة واجهة مستخدم يمكن عرضها وتخزينها اختياريًا على الخادم. في Next.js، يتم تقسيم عمل العرض بشكل أكبر حسب أجزاء المسار لتمكين البث (Streaming) والعرض الجزئي، وهناك ثلاث استراتيجيات مختلفة لعرض الخادم:

• العرض الثابت (Static Rendering)
• العرض الديناميكي (Dynamic Rendering)
• البث (Streaming)

ستتعرف في هذه الصفحة على كيفية عمل مكونات الخادم، ومتى يمكنك استخدامها، واستراتيجيات عرض الخادم المختلفة.

فوائد العرض على الخادم

هناك عدة فوائد لعملية العرض على الخادم، بما في ذلك:

• جلب البيانات (Data Fetching): تسمح لك مكونات الخادم بنقل جلب البيانات إلى الخادم، أقرب إلى مصدر البيانات الخاص بك. يمكن أن يحسن هذا الأداء عن طريق تقليل الوقت المستغرق لجلب البيانات اللازمة للعرض، وعدد الطلبات التي يحتاج العميل إلى إجرائها.
• الأمان (Security): تتيح لك مكونات الخادم الاحتفاظ بالبيانات الحساسة والمنطق على الخادم، مثل الرموز (Tokens) ومفاتيح API، دون خطر الكشف عنها للعميل.
• التخزين المؤقت (Caching): من خلال العرض على الخادم، يمكن تخزين النتيجة وإعادة استخدامها في الطلبات اللاحقة وعبر المستخدمين. يمكن أن يحسن هذا الأداء ويقلل التكلفة عن طريق تقليل كمية العرض وجلب البيانات المطلوبة في كل طلب.
• حجم الحزمة (Bundle Sizes): تسمح لك مكونات الخادم بالاحتفاظ بالتبعيات الكبيرة التي كانت تؤثر سابقًا على حجم حزمة JavaScript على العميل. هذا مفيد للمستخدمين الذين لديهم اتصال إنترنت أبطأ أو أجهزة أقل قوة، حيث لا يتعين على العميل تنزيل وتحليل وتنفيذ أي JavaScript لمكونات الخادم.
• تحميل الصفحة الأولي و الرسم الأولي للمحتوى (FCP): على الخادم، يمكننا إنشاء HTML للسماح للمستخدمين بمشاهدة الصفحة على الفور، دون انتظار قيام العميل بتنزيل وتحليل وتنفيذ JavaScript المطلوب لعرض الصفحة.
• تحسين محركات البحث (SEO) وإمكانية المشاركة على الشبكات الاجتماعية: يمكن لمحركات البحث استخدام HTML المعروض لفهرسة صفحاتك، ويمكن للروبوتات الاجتماعية إنشاء معاينات بطاقات اجتماعية لصفحاتك.
• البث (Streaming): تتيح لك مكونات الخادم تقسيم عمل العرض إلى أجزاء وبثها إلى العميل عندما تصبح جاهزة. هذا يسمح للمستخدم برؤية أجزاء من الصفحة في وقت مبكر دون الحاجة إلى انتظار اكتمال عرض الصفحة بأكملها على الخادم.

استخدام مكونات الخادم في Next.js

بشكل افتراضي، يستخدم Next.js مكونات الخادم. هذا يسمح لك بتنفيذ عرض الخادم تلقائيًا دون أي تكوين إضافي، ويمكنك اختيار استخدام مكونات العميل (Client Components) عند الحاجة، راجع مكونات العميل.

كيف يتم عرض مكونات الخادم؟

على الخادم، يستخدم Next.js واجهات برمجة تطبيقات React لتنسيق العرض. يتم تقسيم عمل العرض إلى أجزاء: حسب أجزاء المسار الفردية و حدود Suspense.

يتم عرض كل جزء على خطوتين:

1. تقوم React بعرض مكونات الخادم إلى تنسيق بيانات خاص يسمى حمل مكون خادم React (RSC Payload).
2. يستخدم Next.js حمل RSC وتعليمات JavaScript لمكون العميل لعرض HTML على الخادم.

ثم على العميل:

1. يتم استخدام HTML لإظهار معاينة سريعة غير تفاعلية للمسار - هذا لتحميل الصفحة الأولي فقط.
2. يتم استخدام حمل مكونات خادم React لتنسيق أشجار مكونات العميل والخادم، وتحديث DOM.
3. يتم استخدام تعليمات JavaScript لـ ترطيب (Hydrate) مكونات العميل وجعل التطبيق تفاعليًا.

ما هو حمل مكون خادم React (RSC)؟

حمل RSC هو تمثيل ثنائي مضغوط لشجرة مكونات خادم React المعروضة. يتم استخدامه بواسطة React على العميل لتحديث DOM المتصفح. يحتوي حمل RSC على:

• نتيجة عرض مكونات الخادم
• عناصر نائبة لمكان عرض مكونات العميل ومراجع لملفات JavaScript الخاصة بها
• أي خصائص (props) تم تمريرها من مكون خادم إلى مكون عميل

استراتيجيات عرض الخادم

هناك ثلاثة أنواع فرعية لعرض الخادم: الثابت، الديناميكي، والبث.

العرض الثابت (الافتراضي)

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

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

العرض الديناميكي

مع العرض الديناميكي، يتم عرض المسارات لكل مستخدم في وقت الطلب.

العرض الديناميكي مفيد عندما يحتوي المسار على بيانات مخصصة للمستخدم أو معلومات لا يمكن معرفتها إلا في وقت الطلب، مثل ملفات تعريف الارتباط (Cookies) أو معلمات البحث في URL.

المسارات الديناميكية مع البيانات المخزنة مؤقتًا

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

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

تعرف على المزيد حول تخزين المسار الكامل و تخزين البيانات.

التبديل إلى العرض الديناميكي

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

في الجدول أعلاه، لكي يكون المسار ثابتًا بالكامل، يجب تخزين جميع البيانات مؤقتًا. ومع ذلك، يمكن أن يكون لديك مسار معروض ديناميكيًا يستخدم كلاً من جلب البيانات المخزنة وغير المخزنة مؤقتًا.

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

الوظائف الديناميكية

تعتمد الوظائف الديناميكية على معلومات لا يمكن معرفتها إلا في وقت الطلب مثل ملفات تعريف الارتباط للمستخدم أو رؤوس الطلبات الحالية أو معلمات البحث في URL. في Next.js، هذه الوظائف الديناميكية هي:

• cookies() و headers(): استخدام هذه في مكون خادم سيؤدي إلى اختيار المسار بالكامل للعرض الديناميكي في وقت الطلب.
• useSearchParams():
  • في مكونات العميل، سيتخطى العرض الثابت ويعرض بدلاً من ذلك جميع مكونات العميل حتى الحد الأبسط لـ Suspense على العميل.
  • نوصي بلف مكون العميل الذي يستخدم useSearchParams() في حد <Suspense/>. هذا سيسمح لأي مكونات عميل فوقها أن تُعرض بشكل ثابت. مثال.
• searchParams: استخدام خاصية الصفحات سيؤدي إلى اختيار الصفحة للعرض الديناميكي في وقت الطلب.

استخدام أي من هذه الوظائف سيؤدي إلى اختيار المسار بالكامل للعرض الديناميكي في وقت الطلب.

البث (Streaming)

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

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

يمكنك بدء بث أجزاء المسار باستخدام loading.js ومكونات واجهة المستخدم مع React Suspense. راجع قسم واجهة تحميل وبث لمزيد من المعلومات.