مكونات الخادم (Server Components)
تسمح لك مكونات الخادم (Server Components) في React بكتابة واجهة مستخدم يمكن تصييرها واختياريًا تخزينها مؤقتًا على الخادم. في Next.js، يتم تقسيم عمل التصيير حسب مقاطع المسار لتمكين البث (Streaming) والتصيير الجزئي، وهناك ثلاث استراتيجيات مختلفة لتصيير الخادم:
ستستعرض هذه الصفحة كيفية عمل مكونات الخادم، متى يمكنك استخدامها، واستراتيجيات تصيير الخادم المختلفة.
فوائد التصيير على الخادم
هناك عدة فوائد لتنفيذ عمل التصيير على الخادم، بما في ذلك:
- جلب البيانات: تسمح لك مكونات الخادم بنقل جلب البيانات إلى الخادم، أقرب إلى مصدر البيانات. هذا يمكن أن يحسن الأداء عن طريق تقليل الوقت المستغرق لجلب البيانات المطلوبة للتصيير، وعدد الطلبات التي يحتاج العميل إلى إجرائها.
- الأمان: تسمح لك مكونات الخادم بالاحتفاظ بالبيانات الحساسة والمنطق على الخادم، مثل الرموز المميزة (Tokens) ومفاتيح API، دون خطر كشفها للعميل.
- التخزين المؤقت: عن طريق التصيير على الخادم، يمكن تخزين النتيجة مؤقتًا وإعادة استخدامها في الطلبات اللاحقة وعبر المستخدمين. هذا يمكن أن يحسن الأداء ويقلل التكلفة عن طريق تقليل كمية التصيير وجلب البيانات المطلوبة في كل طلب.
- الأداء: تمنحك مكونات الخادم أدوات إضافية لتحسين الأداء من الأساس. على سبيل المثال، إذا بدأت بتطبيق مكون بالكامل من مكونات العميل (Client Components)، فإن نقل الأجزاء غير التفاعلية من واجهة المستخدم إلى مكونات الخادم يمكن أن يقلل من كمية JavaScript المطلوبة على جانب العميل. هذا مفيد للمستخدمين الذين لديهم اتصال إنترنت أبطأ أو أجهزة أقل قوة، حيث يكون هناك كمية أقل من JavaScript للتنزيل والتحليل والتنفيذ في المتصفح.
- تحميل الصفحة الأولي وأول رسم للمحتوى (FCP): على الخادم، يمكننا إنشاء HTML للسماح للمستخدمين بمشاهدة الصفحة على الفور، دون انتظار تنزيل العميل وتحليل وتنفيذ JavaScript المطلوب لتصيير الصفحة.
- تحسين محركات البحث (SEO) وإمكانية المشاركة على الشبكات الاجتماعية: يمكن استخدام HTML المصير بواسطة برامج الزحف لمحركات البحث لفهرسة صفحاتك وبرامج الزحف للشبكات الاجتماعية لإنشاء معاينات بطاقات اجتماعية لصفحاتك.
- البث (Streaming): تسمح لك مكونات الخادم بتقسيم عمل التصيير إلى أجزاء وبثها إلى العميل عندما تصبح جاهزة. هذا يسمح للمستخدم برؤية أجزاء من الصفحة في وقت مبكر دون الحاجة إلى انتظار اكتمال تصيير الصفحة بالكامل على الخادم.
استخدام مكونات الخادم في Next.js
بشكل افتراضي، يستخدم Next.js مكونات الخادم. هذا يسمح لك بتنفيذ تصيير الخادم تلقائيًا دون أي تكوين إضافي، ويمكنك اختيار استخدام مكونات العميل عند الحاجة، راجع مكونات العميل.
كيف يتم تصيير مكونات الخادم؟
على الخادم، يستخدم Next.js واجهات برمجة تطبيقات React لتنسيق التصيير. يتم تقسيم عمل التصيير إلى أجزاء: حسب مقاطع المسار الفردية وحدود Suspense.
يتم تصيير كل جزء في خطوتين:
- تقوم React بتصيير مكونات الخادم إلى تنسيق بيانات خاص يسمى حمل مكون خادم React (RSC Payload).
- يستخدم Next.js حمل RSC وتعليمات JavaScript لمكون العميل لتصيير HTML على الخادم.
ثم، على العميل:
- يتم استخدام HTML لعرض معاينة سريعة غير تفاعلية للمسار على الفور - هذا فقط لتحميل الصفحة الأولي.
- يتم استخدام حمل مكونات خادم React لتنسيق أشجار مكونات العميل والخادم، وتحديث DOM.
- يتم استخدام تعليمات 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(): استخدام هذه في مكون خادم سيحول المسار بالكامل إلى تصيير ديناميكي في وقت الطلب.searchParams: استخدام خاصيةsearchParamsفي صفحة سيحول الصفحة إلى تصيير ديناميكي في وقت الطلب.
استخدام أي من هذه الوظائف سيحول المسار بالكامل إلى تصيير ديناميكي في وقت الطلب.
البث (Streaming)
يسمح لك البث بتصيير واجهة المستخدم تدريجيًا من الخادم. يتم تقسيم العمل إلى أجزاء وبثها إلى العميل عندما تصبح جاهزة. هذا يسمح للمستخدم برؤية أجزاء من الصفحة على الفور، قبل اكتمال تصيير المحتوى بالكامل.
البث مدمج في موجه تطبيق Next.js افتراضيًا. هذا يساعد في تحسين أداء تحميل الصفحة الأولي، وكذلك واجهة المستخدم التي تعتمد على جلب بيانات أبطأ مما قد يعيق تصيير المسار بالكامل. على سبيل المثال، التقييمات على صفحة منتج.
يمكنك بدء بث مقاطع المسار باستخدام loading.js ومكونات واجهة المستخدم مع React Suspense. راجع قسم واجهة مستخدم التحميل والبث لمزيد من المعلومات.