عندما يبدأ المطور مشروعًا جديدًا بإطار عمل حديث مثل Next.js أو Nuxt أو Astro، يواجه سؤالًا مبكرًا يؤثر في سرعة الموقع وظهوره في محركات البحث وتكلفة استضافته: أين وكيف تُبنى صفحات الموقع؟ هل يبنيها المتصفح بنفسه، أم الخادم عند كل طلب، أم تُجهز مسبقًا أثناء النشر؟ هذه الخيارات تعرف باختصارات CSR وSSR وSSG وISR، وفهم الفرق بينها من أهم مهارات مطور الويب اليوم. في هذا الموضوع نشرح كل طريقة بلغة بسيطة، ومزاياها وعيوبها، ومتى تختار كلًا منها.
العرض من جهة العميل CSR
في أسلوب العرض من جهة العميل Client-Side Rendering يرسل الخادم صفحة HTML شبه فارغة مع ملف جافاسكربت كبير، ثم يتولى المتصفح تنفيذ الكود وجلب البيانات وبناء الواجهة كاملة. وهذا الأسلوب هو ما اشتهرت به تطبيقات الصفحة الواحدة المبنية بمكتبة React أو Vue بشكلها التقليدي، ومن مزاياه أن التنقل بين الصفحات بعد التحميل الأول يكون سريعًا وسلسًا يشبه التطبيقات.
لكن عيوبه واضحة في المواقع العامة، فالزائر يرى شاشة فارغة أو مؤشر تحميل حتى ينتهي المتصفح من تنزيل الكود وتنفيذه، وهو ما يضر بمؤشرات الأداء خاصة على الهواتف المتوسطة. كما أن اعتماد المحتوى على جافاسكربت يجعل فهرسته من محركات البحث أبطأ وأقل موثوقية مقارنة بالمحتوى الجاهز في HTML. لذلك يناسب CSR لوحات التحكم والتطبيقات الداخلية التي تحتاج تسجيل دخول ولا يهمها الظهور في نتائج البحث.
العرض من جهة الخادم SSR
في أسلوب العرض من جهة الخادم Server-Side Rendering يبني الخادم صفحة HTML كاملة لكل طلب، بالبيانات المحدثة لحظة الزيارة، ثم يرسلها جاهزة إلى المتصفح، فيرى الزائر المحتوى فورًا، وتقرؤه محركات البحث بسهولة. وبعد ذلك تأتي مرحلة تسمى الإماهة Hydration، يربط فيها الكود الموجود في المتصفح الأحداث والتفاعلات بالصفحة لتصبح تفاعلية بالكامل.
ويعد SSR الخيار المناسب للصفحات التي يتغير محتواها باستمرار أو يختلف من مستخدم لآخر، مثل صفحات نتائج البحث، والصفحات الشخصية، وصفحات المنتجات ذات الأسعار والمخزون المتغير. لكن ثمنه أن الخادم يعمل عند كل زيارة، مما يرفع استهلاك الموارد وزمن استجابة الخادم مقارنة بالصفحات الجاهزة، ويحتاج إلى استضافة قادرة على تشغيل Node.js أو بيئة مماثلة، مع اهتمام جيد بالتخزين المؤقت.
ومن الأخطاء الشائعة عند استخدام SSR أن يفترض المطور أن الصفحة صارت سريعة تلقائيًا، بينما قد تبقى ثقيلة إذا كانت ترسل كمية كبيرة من جافاسكربت لإتمام الإماهة. فالصفحة قد تظهر بسرعة لكنها لا تستجيب للنقر إلا بعد ثوان، وهو ما ينعكس سلبًا على مؤشر INP. لذلك يجب مراقبة حجم الكود المرسل للمتصفح حتى مع العرض من جهة الخادم.
التوليد الثابت SSG والتجديد التدريجي ISR
أما التوليد الثابت Static Site Generation فيبني جميع الصفحات مرة واحدة أثناء عملية النشر، ويحولها إلى ملفات HTML ثابتة تُرفع على الخادم أو على شبكة توصيل المحتوى. وعند زيارة الصفحة تُقدم مباشرة دون أي معالجة، فتكون أسرع ما يمكن وأرخص في الاستضافة وأكثر أمانًا لعدم وجود قاعدة بيانات أو كود خادم معرض للهجوم. ولهذا يعد SSG مثاليًا للمدونات ومواقع التوثيق والصفحات التعريفية التي لا يتغير محتواها كثيرًا.
ومشكلة SSG أن أي تعديل في المحتوى يتطلب إعادة بناء الموقع، وهو أمر مرهق في المواقع التي تضم آلاف الصفحات. ومن هنا جاء التجديد الثابت التدريجي Incremental Static Regeneration الذي اشتهر في Next.js، حيث تُقدم الصفحة الثابتة للزوار، وتُجدد في الخلفية بعد مدة زمنية محددة أو عند حدوث تغيير في المحتوى، فيجمع ISR بين سرعة الصفحات الثابتة وحداثة البيانات دون إعادة بناء الموقع كاملًا.
وظهرت أيضًا مقاربات أحدث تمزج بين هذه الأساليب، مثل معمارية الجزر في إطار Astro، التي ترسل الصفحة ثابتة بالكامل ولا تحمّل جافاسكربت إلا للمكونات التفاعلية المحددة فقط، ومكونات الخادم في React التي تنفذ أجزاء من الواجهة على الخادم دون إرسال كودها إلى المتصفح. والهدف المشترك لكل هذه الحلول هو تقليل كمية جافاسكربت التي يحملها الزائر مع الحفاظ على التفاعل.
كيف تختار بين SSR وSSG وCSR؟
القاعدة العملية أن تبدأ بسؤال: هل يتغير محتوى هذه الصفحة لكل زائر أو عند كل لحظة؟ فإن كانت الإجابة لا، فالتوليد الثابت SSG هو الخيار الأفضل غالبًا. وإن كان المحتوى يتغير دوريًا لكنه متشابه لجميع الزوار، فإن ISR أو SSG مع إعادة بناء مجدولة يقدمان توازنًا ممتازًا. أما إن كان المحتوى شخصيًا أو لحظيًا، فإن SSR هو الأنسب، مع الاعتماد على CSR داخل الأجزاء التفاعلية ولوحات التحكم.
والجميل في أطر العمل الحديثة أنها لا تجبرك على اختيار واحد للموقع كله، بل تسمح باختيار طريقة العرض لكل صفحة على حدة. فيمكن لمتجر إلكتروني أن يقدم صفحاته التعريفية بالتوليد الثابت، وصفحات المنتجات بالتجديد التدريجي، وسلة المشتريات وحساب العميل بالعرض من جهة الخادم أو العميل، فيحصل كل جزء على الأسلوب الذي يناسبه.
الخلاصة
لا يوجد أسلوب عرض أفضل من غيره بشكل مطلق، فلكل من CSR وSSR وSSG وISR مكانه المناسب. والمطور الناجح هو من يفهم طبيعة كل صفحة في مشروعه، ويختار لها الطريقة التي تحقق التوازن بين السرعة والسيو وحداثة البيانات وتكلفة التشغيل. فما الإطار الذي تستخدمونه في مشاريعكم؟ وأي أسلوب عرض تعتمدون عليه أكثر؟ شاركونا تجاربكم في الردود.
