ما هو Server-Side Rendering ولماذا يحتاجه موقعك ليظهر في جوجل؟

كثير من مواقع الشركات الحديثة تُبنى كتطبيقات جافاسكريبت بأطر عمل مثل Angular أو React أو Vue. تبدو سريعة بعد تحميلها، لكن هناك مشكلة: إذا كانت الصفحة تُبنى بالكامل داخل متصفح الزائر، فأول ما يستلمه محرك البحث أو الموبايل البطيء هو غلاف HTML شبه فارغ وحزمة كبيرة من السكريبتات. وظهور خدماتك وأسعارك ومقالاتك يتوقف على نجاح تشغيل هذه السكريبتات.

الإجابة المختصرة: العرض من جانب السيرفر (Server-Side Rendering أو SSR) يعني أن السيرفر يبني HTML الصفحة كاملاً قبل إرسالها. يرى الزائر المحتوى أسرع، ويستلم محرك البحث النصوص والروابط والبيانات الوصفية مباشرة دون انتظار جافاسكريبت. جوجل يستطيع تشغيل جافاسكريبت، لكن توثيقه الرسمي يقول إن العرض من السيرفر أو العرض المسبق "ما زال فكرة ممتازة" لأنه يجعل الموقع أسرع للمستخدمين ولبرامج الزحف، ولأن ليس كل البرامج تستطيع تشغيل جافاسكريبت. لموقع شركة يعتمد على جوجل، SSR أو العرض المسبق هو الاختيار الآمن.

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

الخلاصة السريعة

• العرض من المتصفح (CSR) يبني الصفحة عند الزائر، والعرض من السيرفر (SSR) يبنيها على السيرفر، والعرض المسبق (SSG) يبنيها وقت النشر.
• جوجل يزحف للصفحة، ثم يضع صفحات جافاسكريبت في طابور للعرض، ثم يفهرسها؛ والطابور قد يستغرق ثوانٍ أو أكثر.
• يوصي جوجل بالعرض من السيرفر أو العرض الثابت أو الـ Hydration، ويصف "العرض الديناميكي" بأنه حل مؤقت لا حل طويل المدى.
• ليست كل البرامج تشغّل جافاسكريبت، لذلك يفيد SSR أيضاً محركات البحث الأخرى ومعاينات الروابط والأدوات التي تقرأ صفحاتك.
• Angular يدعم الأنماط الثلاثة لكل مسار، مع Hydration لتفعيل التفاعل في الصفحات المعروضة من السيرفر.

كيف يعالج جوجل صفحات جافاسكريبت؟

يصف دليل جوجل لأساسيات سيو جافاسكريبت ثلاث مراحل:

1. الزحف: يجلب Googlebot الرابط ويتحقق من ملف robots.txt.
2. العرض: الصفحات التي تعيد حالة 200 توضع في طابور للعرض، ويشغّل متصفح Chromium بلا واجهة كود جافاسكريبت. ويذكر جوجل أن الصفحة "قد تبقى في الطابور ثوانٍ قليلة، لكن الأمر قد يستغرق أطول من ذلك".
3. الفهرسة: يستخدم جوجل HTML الناتج بعد العرض لفهرسة المحتوى.

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

مقارنة خيارات العرض

النمط	أين يُبنى HTML	الأنسب لـ	انتبه إلى
العرض من المتصفح (CSR)	في متصفح الزائر	لوحات التحكم وصفحات ما بعد تسجيل الدخول	HTML أولي فارغ، وعرض أول أبطأ على الموبايلات الضعيفة
العرض من السيرفر (SSR)	على السيرفر مع كل طلب	المحتوى المتغير: المقالات والخدمات والقوائم	يحتاج سيرفر Node.js وتخزيناً مؤقتاً، وكوداً يعمل على السيرفر والمتصفح
العرض المسبق (SSG)	وقت البناء أو النشر	الصفحات نادرة التغيير: الرئيسية ومن نحن وصفحات الهبوط	يجب إعادة البناء عند تغيير المحتوى
العرض الديناميكي	نسخة منفصلة لبرامج الزحف	حل قديم مؤقت فقط	يصفه جوجل بأنه حل مؤقت لا طويل المدى

عن العرض الديناميكي، توثيق جوجل واضح: كان حلاً مؤقتاً وليس حلاً طويل المدى لمشاكل المحتوى المولَّد بجافاسكريبت، ويوصي بدلاً منه بالعرض من السيرفر أو العرض الثابت أو الـ Hydration.

لماذا يهم SSR لموقع شركة مصرية؟

السرعة على الموبايلات المتوسطة

وفق StatCounter كانت 67.1% من مشاهدات صفحات الويب في مصر من الموبايل في أغسطس 2026، وأغلبها أندرويد. في العرض من المتصفح يجب أن يحمّل الموبايل جافاسكريبت ويحلله ويشغله قبل عرض المحتوى، وهذا بطيء على المعالجات المتواضعة. أما مع SSR فيظهر النص والصور بمجرد وصول HTML ثم يأتي التفاعل، وهذا يدعم مؤشر LCP، أحد مؤشرات Core Web Vitals.

برامج أخرى ومعاينات الروابط

عندما تشارك صفحة خدمة على واتساب أو لينكدإن أو فيسبوك، تقرأ برامج المعاينة عنوان الصفحة ووصفها وصورتها من HTML. وجوجل نفسه يذكر أن ليس كل البرامج تستطيع تشغيل جافاسكريبت. إن كانت بياناتك الوصفية تُضبط بالسكريبت فقط، قد تظهر المعاينة بعنوان عام أو لا تظهر. SSR يضع البيانات الوصفية الصحيحة في HTML لكل صفحة.

مزايا البحث بالذكاء الاصطناعي

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

كيف يعمل SSR في Angular؟

وفق دليل Angular للعرض من السيرفر، يدعم Angular ثلاثة أنماط يمكن تحديدها لكل مسار:

• Server: يعرض التطبيق على السيرفر مع كل طلب ويرسل صفحة HTML مكتملة.
• Client: يعرض في المتصفح، وهو السلوك الافتراضي في Angular.
• Prerender: يولّد ملفات HTML ثابتة للمسارات وقت البناء.

موقع الشركة المعتاد يمكنه عرض الصفحات الثابتة مسبقاً، وعرض المقالات وصفحات الخدمات من السيرفر، وإبقاء بوابة العملاء خلف تسجيل الدخول معروضة من المتصفح. ثم يستخدم Angular الـ Hydration: يعيد المتصفح استخدام HTML القادم من السيرفر ويضيف إليه التفاعل بدلاً من بناء الصفحة من الصفر.

أخطاء شائعة عند إضافة SSR

• كود خاص بالمتصفح: الكود الذي يستخدم window أو localStorage أو DOM يجب أن يعمل في المتصفح فقط؛ ويحذر توثيق Angular من أنماط تسبب عدم تطابق في الـ Hydration وقفزات في التخطيط تضر مؤشرات Core Web Vitals.
• طلبات بيانات مكررة: بدون نقل الحالة (Transfer State) قد يعيد المتصفح طلب البيانات التي جلبها السيرفر.
• أكواد حالة خاطئة: الصفحة غير الموجودة يجب أن تعيد 404 من السيرفر، لا صفحة بحالة 200 مكتوب فيها "غير موجود".
• بيانات وصفية لكل صفحة: العنوان والوصف ووسم canonical وhreflang يجب ضبطها أثناء العرض من السيرفر لكل مسار.
• التخزين المؤقت: خزّن الصفحات أو البيانات المعروضة بشكل مدروس ليبقى السيرفر سريعاً تحت الضغط.

كيف تعرف إن كان موقعك يحتاج SSR؟

1. افتح صفحة مهمة واختر "عرض مصدر الصفحة" (View page source) لا أداة الفحص، وابحث عن جملة من الصفحة؛ إن لم تجدها فالمحتوى يضاف بجافاسكريبت.
2. استخدم أداة فحص عنوان URL في Google Search Console واطلع على الصفحة التي زحف إليها جوجل وHTML الخاص بها.
3. أرسل رابط الصفحة في محادثة واتساب مع نفسك، وانظر هل تظهر المعاينة بالعنوان والصورة الصحيحين.
4. راجع تقرير Core Web Vitals في سيرش كونسول لمشاكل LCP على الموبايل.

إن كان المصدر شبه فارغ والمعاينات عامة، فالعرض من السيرفر أو العرض المسبق يجب أن يكون ضمن أولوياتك.

نقل موقع قائم من CSR إلى SSR

إن كان موقعك الحالي معروضاً من المتصفح، فغالباً لا تحتاج إعادة بنائه؛ ففي تطبيقات Angular وReact وVue يمكن كثيراً إضافة SSR إلى الكود الحالي. الانتقال المدروس يسير هكذا:

1. راجع المسارات العامة: حدد الصفحات التي يجب أن تتصدر البحث، مثل الرئيسية والخدمات والمقالات والفروع؛ وصفحات ما بعد تسجيل الدخول تبقى في المتصفح.
2. عالج الكود الخاص بالمتصفح ليعمل في المتصفح فقط.
3. انقل البيانات الوصفية إلى السيرفر: العنوان والوصف وcanonical وhreflang والبيانات المنظمة تُضبط أثناء العرض.
4. أعد أكواد حالة صحيحة للصفحات غير الموجودة والتحويلات.
5. حافظ على نفس الروابط: طريقة العرض تغيّر كيف تُبنى الصفحة لا مكانها، فلا حاجة لتحويلات.
6. اختبر قبل الإطلاق بعرض المصدر وأداة فحص URL وموبايلات أندرويد حقيقية، ثم تابع الفهرسة ومؤشرات Core Web Vitals في سيرش كونسول خلال الأسابيع التالية.

متى يكفي العرض من المتصفح؟

ليست كل الشاشات تحتاج SSR. لوحات التحكم وشاشات ERP وبوابات العملاء خلف تسجيل الدخول لا يُقصد ظهورها في البحث، فالعرض من المتصفح مناسب لها تماماً.

أسئلة تطرحها على المطور

• أي الصفحات تُعرض من السيرفر، وأيها معروضة مسبقاً، وأيها من المتصفح فقط؟
• هل كل الصفحات العامة تعيد HTML كاملاً بالعنوان والوصف ووسم canonical دون جافاسكريبت؟
• هل الصفحات غير الموجودة تعيد حالة 404 حقيقية؟
• كيف يُدار الـ Hydration، وهل راجعتم قفزات التخطيط؟
• كيف تُخزَّن الصفحات المعروضة مؤقتاً، وماذا يحدث عند تحديث المحتوى؟

ولمعرفة موقع SSR في قرار البناء الأشمل، راجع مقارنتنا بين موقع ووردبريس والموقع المبرمج خصيصاً.

كيف تساعدك Nilex

تبني Nilex مواقع شركات مهيأة للسيو وتطبيقات ويب باستخدام Angular مع العرض من السيرفر على Node.js: الصفحات العامة تصل HTML كاملاً ببيانات وصفية وأكواد حالة صحيحة، والصفحات الثابتة معروضة مسبقاً، والمناطق الخاصة تبقى في المتصفح خلف تسجيل الدخول.

الأسئلة الشائعة

ما هو Server-Side Rendering ببساطة؟

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

هل يستطيع جوجل فهرسة مواقع جافاسكريبت بدون SSR؟

نعم، جوجل يستطيع عرض جافاسكريبت، لكن العرض يتم في طابور ويعتمد على عمل السكريبتات بشكل صحيح. ومع ذلك يوصي جوجل بالعرض من السيرفر أو العرض المسبق لأنه أسرع ولأن ليس كل البرامج تشغّل جافاسكريبت.

ما الفرق بين SSR والعرض المسبق؟

SSR يبني HTML مع كل طلب، وهذا يناسب المحتوى الذي يتغير كثيراً. العرض المسبق يبني HTML مرة واحدة وقت النشر، وهذا يناسب الصفحات نادرة التغيير. ومواقع كثيرة تستخدم الاثنين.

هل ما زال العرض الديناميكي مقبولاً؟

يصف جوجل العرض الديناميكي بأنه حل مؤقت لا طويل المدى، ويوصي بدلاً منه بالعرض من السيرفر أو العرض الثابت أو الـ Hydration.

هل يحتاج موقع ووردبريس إلى SSR؟

ووردبريس التقليدي يولّد HTML على السيرفر بلغة PHP، فهو معروض من السيرفر بطبيعته. السؤال يخص أساساً المواقع المبنية كتطبيقات جافاسكريبت.

تأكد أن جوجل يرى ما يراه عملاؤك

إن كان موقعك تطبيق جافاسكريبت وصفحاتك لا تظهر في جوجل كما تتوقع، فقد تكون طريقة العرض هي السبب. اطلب من Nilex فحصاً فنياً مجانياً للسيو يوضح كيف تُعرض صفحاتك وتُفهرس.