لماذا العرض من جهة الخادم
افهم فوائد SSR لتحسين SEO والسرعة
لماذا العرض من جهة الخادم درس مجاني في Angular Academy على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Angular Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Angular Academy 4 دروس في المجموع.
ما المقصود بـ SSR
يُشغّل العرض من جانب الخادم (SSR) تطبيق Angular على الخادم لإنتاج HTML مُعرَض بالكامل لكل طلب. ويتلقى المتصفح ترميزاً ذا معنى فوراً بدلاً من هيكل فارغ.
مشكلة CSR
يرسل تطبيق العرض من جانب العميل فقط (CSR) ملف index.html شبه فارغ مع JavaScript. ويرى المستخدمون وبرامج الزحف صفحة فارغة حتى يتم تنزيل الحزمة وتحليلها وتشغيلها. ويعالج SSR هذه الفجوة في العرض الأول.
فوائد تحسين محركات البحث
تقرأ العديد من برامج الزحف وبرامج معاينة الروابط HTML الأولي. ومع SSR، يكون عنوان الصفحة والوسوم الوصفية والمحتوى موجودة في الاستجابة، مما يحسّن الفهرسة ومعاينات الروابط الغنية على الشبكات الاجتماعية.
<!-- SSR response already contains content -->
<title>Product — Blue Shoes</title>
<meta name="description" content="Comfortable blue running shoes">
<h1>Blue Shoes</h1>عرض المحتوى الأول بشكل أسرع
بما أن الخادم يرسل HTML مُعرَضاً، يعرض المتصفح المحتوى في وقت أقرب. وهذا يحسّن وقت عرض المحتوى الأول (FCP) والسرعة المتصوَّرة، خصوصاً على الشبكات أو الأجهزة البطيئة.
تحسين مؤشرات الويب الأساسية
يمكن لـ SSR تحسين وقت عرض أكبر محتوى (LCP) عبر تقديم المحتوى الرئيسي في HTML الأولي بدلاً من تقديمه بعد تنفيذ JavaScript. وتساعد المؤشرات الجيدة كلاً من تجربة المستخدم وترتيب البحث.
المشاركة على الشبكات الاجتماعية
عندما يشارك شخص ما رابطاً، تجلب المنصات عنوان URL وتقرأ وسوم Open Graph وTwitter الوصفية من HTML. ويضمن SSR أن تعكس هذه الوسوم الصفحة الفعلية، فتنتج بطاقات دقيقة.
<meta property="og:title" content="Blue Shoes">
<meta property="og:image" content="/img/shoes.png">تأتي عملية الإماهة بعد ذلك
بعد تقديم HTML، يبدأ التطبيق نفسه على العميل ويتولى التفاعلية. تُسمى هذه العملية الإماهة؛ ويعيد Angular الحديث استخدام HTML الذي أنشأه الخادم بدلاً من إعادة عرضه.
المفاضلات
يضيف SSR تكلفة وتعقيداً على الخادم: بيئة تشغيل Node، ومراعاة الفرق بين التعليمات البرمجية الخاصة بالخادم وتلك الخاصة بالمتصفح، والعرض وقت الطلب. وازن ذلك مقابل مكاسب تحسين محركات البحث والأداء في تطبيقك.
متى يكون SSR أكثر فائدة
تستفيد الصفحات العامة الغنية بالمحتوى والحساسة لتحسين محركات البحث (مثل صفحات التسويق والمدونات وقوائم التجارة الإلكترونية) بأكبر قدر. أما لوحات المعلومات الداخلية المحمية بتسجيل الدخول، فغالباً ما تستفيد قليلاً من SSR.
بديل العرض المسبق
بالنسبة إلى المسارات الثابتة غالباً، ينشئ العرض المسبق (SSG) HTML وقت البناء، مقدماً فوائد شبيهة بـ SSR من دون خادم مباشر. ويدعم Angular كلاً من SSR والعرض المسبق جنباً إلى جنب.
SSR في Angular اليوم
يوفر Angular الحديث SSR رسمياً عبر @angular/ssr مع منشئ التطبيق، والإماهة الكاملة لـ DOM، وأنماط العرض لكل مسار، مما يجعل SSR أبسط بكثير من إعدادات Angular Universal القديمة.
تحقق سريع
اختبر فهمك لأهمية SSR.
مراجعة
تعلمتَ سبب أهمية SSR: إذ يحسّن HTML الحقيقي في الطلب الأول تحسين محركات البحث، ومعاينات الروابط الاجتماعية، وFCP، وLCP. كما يضيف تكلفة على الخادم، ويناسب الصفحات العامة الغنية بالمحتوى، ويتكامل مع العرض المسبق، ويجعله Angular الحديث ميزة أساسية عبر @angular/ssr.
تعلم HTML مع معلم ذكاء اصطناعي — مجانًا
اكتب وقم بتشغيل أكوادك الفعلية في المتصفح، واحصل على مساعدة فورية من معلم ذكاء اصطناعي متاح 24/7، واستمر من حيث توقفت على الويب أو في التطبيق.
- الدورات
- 38
- الدروس
- 144
الأسئلة الشائعة
هل درس «لماذا العرض من جهة الخادم» مجاني؟
نعم — نص درس «لماذا العرض من جهة الخادم» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Angular Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Angular Academy 4 دروس في المجموع.
ماذا ستتعلم في «لماذا العرض من جهة الخادم»؟
افهم فوائد SSR لتحسين SEO والسرعة تتمرن على Angular Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Angular Academy؟
لا تُشترط خبرة سابقة. Angular Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.
كم من الوقت يستغرق درس «لماذا العرض من جهة الخادم»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Angular Academy هذا؟
نعم. كل درس في Angular Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- لماذا العرض من جهة الخادم
- إعداد Angular SSR
- مسارات الخادم وأنماط العرض
- نقل الحالة إلى العميل