عرض جانب الخادم باستخدام React

قليلا عن React

React هي مكتبة JavaScript مفتوحة المصدر للواجهة الأمامية ، تم إنشاؤها وصيانتها بواسطة Facebook Developer Community. يتم استخدامه لبناء واجهات المستخدم أو مكونات واجهة المستخدم.

ومع ذلك ، قد لا يكون هذا التعريف مفهومًا تمامًا للمبتدئين. لدينا منشور مدونة مثالي يرشدك عبر شرح موجز لـ React ، وصولاً إلى وصف تقني مفصل للغاية لها ، والذي يمكنك العثور عليه هنا.

رحلة صفحة الويب | من الخادم إلى المستعرض الخاص بك

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

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

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

رحلة صفحة ويب عرض من جانب العميل "عادية"

بالتعمق في العملية المذكورة في القسم السابق ، لدينا تقنية تُعرف باسم Client Side Rendering أو CSR ، والتي تم استخدامها منذ فترة طويلة ، لعرض موقع ويب على شاشات المستخدم. وهذا موضح في الرسم البياني التالي:

1. عند كتابة عنوان URL لموقع ويب أو النقر فوق ارتباط إلى موقع الويب ، يرسل متصفحك طلبًا لبعض الملفات إلى الخادم المناسب ، المحدد بواسطة عنوان URL.
2. يرسل الخادم عبر ملف HTML الذي يحتوي على مراجع إلى أصول أخرى مثل ملفات الصور وملفات CSS وملفات جافا سكريبت.
3. يرسل المتصفح طلبًا مرة أخرى إلى الخادم ويقوم بتنزيل جميع الملفات ، بما في ذلك ملفات CSS و JavaScript المشار إليها في ملف HTML.
   1. يمكن أن يكون هذا عاملاً مساهماً في زيادة وقت تحميل موقع الويب إذا كان اتصال المستخدمين ضعيفًا وكان حجم ملف JavaScript كبيرًا.
4. بمجرد تنزيل هذه الملفات بواسطة المتصفح ، يقوم المتصفح بعد ذلك بتنفيذ إطار العمل أو المكتبة (على سبيل المثال React) ويوزع ملفات JavaScript المسؤولة عن جعل صفحة الويب تفاعلية.
   1. من منظور تحسين السرعة ، تعتمد هذه النقطة على جهاز العميل وإذا كان العميل عبارة عن جهاز منخفض الطاقة ، فقد يستغرق ذلك وقتًا طويلاً.
   2. لا يزال المستخدم يرى شاشة التحميل عندما تكون هذه الخطوات قيد التنفيذ
5. يتم أخيرًا تحميل صفحة الويب بالكامل ويمكن للمستخدم رؤية صفحة الويب والتفاعل معها.

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

قد يستغرق هذا وقتًا طويلاً لأنه يعتمد على أداء جهاز العميل في تنفيذ إطار العمل وتحليل ملفات JavaScript.

رحلة صفحة ويب العرض من جانب الخادم

شرح ذلك في سطر واحد ، Server Side Rendering أو SSR هو عملية أخذ موقع إطار عمل JavaScript من جانب العميل وتقديمه إلى HTML و CSS ثابت على الخادم بدلاً من العميل ، كما كان الحال في CSR.

المذكور أدناه هو تمثيل تصويري للرحلة التي تقوم بها صفحة الويب باستخدام عرض جانب الخادم ، مع React:

1. عند كتابة عنوان URL لموقع ويب أو النقر فوق ارتباط إلى موقع الويب ، يرسل متصفحك طلبًا لبعض الملفات إلى الخادم المناسب ، المحدد بواسطة عنوان URL.
2. الخادم ، بدلاً من مجرد إرسال ملفات HTML الفانيليا كما هو الحال في CSR ، يعرض التطبيق في سلسلة باستخدام وظيفة renderToString المستوردة من رد فعل دوم / خادم
   1. ثم يتم إدخال هذا في ملف index.html وإرساله إلى المتصفح.
   2. هذا هو المكان الذي يكمن فيه جوهر SSR ، من الناحية الوظيفية ، حيث أن هذا هو المكان الذي يعرض فيه الخادم الصفحة ، وليس جهاز العميل.
3. يعرض المستعرض ملف HTML هذا مما يؤدي إلى ملء العرض في المستعرض.
   1. ومع ذلك ، هذا ليس تفاعليًا بعد ، ولكن يمكن للمستخدم رؤية العرض النهائي لصفحة الويب.
4. يرسل المتصفح طلبًا مرة أخرى إلى الخادم ويقوم بتنزيل جميع الملفات المشار إليها في ملف HTML ، بما في ذلك ملفات JavaScript.
5. بمجرد تنزيل جميع البرامج النصية ، يُعرض مكون React مرة أخرى على العميل. ومع ذلك ، هذه المرة ، فإنه يرطب العرض الحالي بدلاً من الكتابة فوقه.
   1. تعني "ترطيب" طريقة العرض أنها ترفق أي معالجات للأحداث بعناصر DOM المعروضة (نموذج كائن المستند) ولكنها تحافظ على عناصر DOM المقدمة سليمة. بهذه الطريقة ، يتم الحفاظ على حالة عناصر DOM ولا يحدث إعادة ضبط للعرض.
6. تم أخيرًا تحميل صفحة الويب بالكامل ويمكن للمستخدم الآن التفاعل مع الصفحة التي تمكنوا من رؤيتها من الخطوة 3 نفسها.

وبالتالي ، فإن أحد أكبر التغييرات المرئية من وجهة نظر المستخدم هو أن صفحة الويب تصبح "مرئية" بسرعة كبيرة ، حيث أن عرض HTML لا يستهلك الكثير من الموارد ، ويتحدث من منظور المتصفح.

لا يؤدي هذا بطبيعته إلى تحميل الصفحة بشكل أسرع من تطبيق غير SSR ، ولكنه يمنح المستخدمين عرضًا لصفحة الويب أثناء تنزيل ملفات JavaScript وتحليلها في الخلفية ، وبعد ذلك تصبح صفحة الويب تفاعلية. هذا يعني أن TTI ، أي وقت التفاعل (هذا هو الوقت الذي تستغرقه صفحة الويب لتكون تفاعلية تمامًا من وقت طلب المستخدم لصفحة الويب) أكثر قليلاً من الوقت الذي يستغرقه ظهور صفحة الويب في المتصفح.

لذلك ، في سيناريو SSR ، للحصول على وقت عرض أسرع لأول مرة ، يجب أن يكون HTML و CSS الخاصين بك مفيدًا للمستخدمين ، ويمكن أن تكون JavaScript تحسينًا لـ HTML و CSS ، نظرًا لتأجيل تحميلها.

من المفاهيم الخاطئة الشائعة حول طريقة عمل SSR مع React أنه بعد كل تغيير ، مثل طلب مستخدم أي بيانات جديدة ، يكمل الخادم مرة أخرى جميع الخطوات ويرسل ملف HTML مع واجهة مستخدم جديدة إلى المتصفح ، ولكن هذا ليس هو الحال . يتم إجراء تحديث جزئي فقط للصفحة. على الرغم من إجراء العرض بواسطة الخادم ، يتم إدخال الإخراج النهائي في DOM عن طريق "ترطيبه" ، كما هو موضح سابقًا.

عرض جانب الخادم | متى ومتى لا تستخدم

• إذا كنت بحاجة إلى مُحسّنات محرّكات بحث قوية ، فانتقل إلى SSR حيث يسهل على محركات البحث الزحف.
• بالنسبة لمواقع الويب التي تركز على المحتوى ولا تركز على التفاعل ، مثل المدونات والمواقع الإخبارية والمواقع الثابتة والمواقع ذات النص الثقيل ، يمكن أن يكون SSR نعمة لأنه سيحمل جوهر موقع الويب الخاص بك ، أي المحتوى سريع النيران.
• يستغرق الأمر وقتًا وجهدًا من جانب الخادم لعرض وإنشاء الملفات لإرسالها إلى المتصفح. لذلك إذا كنت تستخدم خادمًا وميزانية عمليات منخفضة ، فمن الأفضل ألا تستخدم SSR حيث سيكون هناك الكثير من الطلبات المرسلة إلى الخادم الخاص بك.
  • ومع ذلك ، مع مزودي الخدمة مثل Firebase ، يمكننا إنشاء محتوى ديناميكيًا باستخدام وظائف السحابة ويمكن للخادم تخزينه في ذاكرة التخزين المؤقت لـ CDN
  • ما سيفعله هذا هو أنه في المرة القادمة عندما يطلب المستخدم ، لا يتم إنشاء الملفات مرة أخرى بواسطة الخادم. بدلاً من ذلك ، يتم تقديمه فقط من حافة CDN محلية ، مما يحسن أوقات التحميل من وجهة نظر المستخدم مع استخدام موارد خادم أقل أيضًا.

كيف تكون React جيدة لـ SSR؟

يُعد React خيارًا ممتازًا لتطبيق SSR لأنه يدمج مفهوم DOM الظاهري (نموذج كائن المستند).

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

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

لذا ، بالنظر إلى حقيقة أن هذه النسخة الافتراضية تتطابق مع HTML التي أرسلناها من الخادم ، فإن React لن تعيد تصييرها ، وبالتالي تقليل وقت التفاعل (TTI) ، مما يؤدي إلى تحميل صفحة ويب "أسرع".

SSR ، كل يوم ، كل يوم!

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

هذا هو المكان الذي تأتي فيه Creole Studios. لدينا مجموعة من خبراء التكنولوجيا ، دائمًا على اطلاع على كل التقنيات الجديدة تقريبًا التي تنبثق في techverse. سوف نفهم احتياجات عملك ونزودك بحلول مخصصة ، سواء كان ذلك تطبيق SSR أو CSR ، وكن مطمئنًا ، فلن تقلق بشأن أي شيء أثناء قيامنا بالرفع الثقيل لك. اتصل بنا واحصل على أفكارك من رأسك إلى تطبيق!