Photo by Lautaro Andreani on Unsplash
مرحباً جميعاً! كيف كان اليوم الأول من عطلتكم الطويلة؟ اليوم أريد أن أشارككم مفاهيم حول أوضاع عرض الويب المختلفة (rendering modes): SSG و SSR و CSR و ISR. تبدو متشابهة ولكن لها تفاصيل مختلفة. قبل أن نقرر أيهما نستخدم، دعونا نلقي نظرة على المقدمات أدناه!
Static Site Generation (SSG)
SSG، أو التوليد الثابت (Static Generation)، يعني توليد ملفات HTML عند بناء (build) المشروع بأكمله. تحتوي ملفات HTML هذه بالفعل على البيانات المطلوبة للعرض. وضع العرض هذا هو نوع من العرض المسبق (pre-rendering). يعتبر SSG مناسباً جداً لمواقع الويب الثابتة التي لا يتغير فيها المحتوى، لأن جميع البيانات يتم الحصول عليها في وقت البناء. يمكن وضع ملفات HTML هذه على شبكة توصيل المحتوى (CDN) وتخزينها مؤقتاً (cached) لتحسين أداء الموقع. بالإضافة إلى ذلك، فإن اعتماد وضع العرض SSG مفيد أيضاً لتحسين محركات البحث (SEO).
Server-side Rendering (SSR)
SSR، أو العرض من جانب الخادم (Server-side Rendering)، يعني أنه في كل مرة يرسل فيها المتصفح (جانب العميل) طلباً (request)، يقوم الخادم بتوليد ملف HTML ويرسله مرة أخرى إلى المتصفح للعرض. وضع العرض هذا مناسب جداً للبيانات التي تتغير بشكل متكرر. ومع ذلك، نظراً لأن الخادم يستغرق وقتاً لتوليد ملف HTML، فسيكون وقت استجابة الموقع أطول، وسيرى المستخدمون شاشة بيضاء أثناء الانتظار. يعتبر SSR أيضاً نوعاً من العرض المسبق، لذا فهو صديق جداً لـ SEO~ ولكن تجدر الإشارة إلى أن هذه الطريقة تتطلب من الخادم معالجة طلبات المستخدمين باستمرار.
Client-side Rendering (CSR)
CSR، أو العرض من جانب العميل (Client-side Rendering)، يعني تماماً ما يشير إليه الاسم. يمكن اعتبار ملف HTML الذي يرسله الخادم إلى المتصفح بلا محتوى. لا يمكن للمتصفح العرض على الشاشة إلا بعد جلب البيانات من الخادم. وضع العرض المستخدم بواسطة تطبيقات الصفحة الواحدة (SPA) مثل React أو Vue هو CSR. أكبر ميزة لهذا الوضع هي عدم الحاجة إلى جلب الملفات من الخادم مرة أخرى عند تبديل الصفحات، لذلك لن يرى المستخدمون شاشة بيضاء، وهو ما يعتبر تجربة مستخدم جيدة جداً. ومع ذلك، سيعتمد وقت العرض على بيئة العميل، وبسبب ذلك، يتم تقليل العبء على الخادم بشكل كبير.
Incremental Static Regeneration (ISR)
ISR، أو إعادة التوليد الثابت التدريجي (Incremental Static Regeneration)، هو وضع عرض لا نسمع عنه كثيراً، ويعتبر أيضاً نوعاً من العرض المسبق. يقوم ISR بتوليد كل (أو جزء من) ملفات HTML عند بناء المشروع. عندما يكون هناك طلب جديد وقد مر وقت محدد مسبقاً، سيقدم الخادم أولاً للمتصفح الملف القديم بينما يعيد توليد أحدث ملف في الخلفية، ثم يرسله إلى المتصفح للعرض بعد اكتمال التوليد. إذا انتقل المستخدم إلى صفحة لم يتم توليدها (generate) بعد، فسيقوم الخادم بتوليد الملف على الفور وتخزينه مؤقتاً، بحيث يمكن للمستخدم التالي في هذه الصفحة الحصول على الملف مباشرة من الذاكرة المؤقتة (cache). يشبه ISR إلى حد كبير SSG، لكنه يحل مشكلة أن SSG لا يمكنه تحديث محتوى البيانات، كما سيتم تخزين ملفات HTML مؤقتاً على CDN، لذلك فهو يقلل أيضاً من العبء على الخادم مقارنة بـ SSR.
أيهما يجب أن تستخدم؟
كل وضع عرض له إيجابيات وسلبيات، واختيار أيهما يعتمد على مشروعنا. لا يوجد فائز واضح.
- لوحات تحكم النظام الداخلي (Internal system dashboards) حيث تتغير البيانات باستمرار ولا حاجة لـ SEO مناسبة جداً لاستخدام CSR.
- إذا لم يكن معدل تغيير البيانات منخفضاً ولكن هناك حاجة لـ SEO، فيمكنك التفكير في استخدام SSR.
- إذا كانت البيانات نادراً ما تحتاج إلى التحديث مثل مواقع الفعاليات أو التسويق، وكان SEO مهماً أيضاً، فإن استخدام SSG مناسب جداً.
- إذا كانت البيانات لا تحتاج إلى تحديث كثير أو كان هناك عدد كبير جداً من الصفحات وهناك حاجة لـ SEO، مثل صفحات المنتجات، فإن ISR هو خيار جيد.
لقد رسمت جدولاً أيضاً (باللغة الإنجليزية XD)، ألقوا نظرة~
Pre-render في Next.js
يتمتع Next.js بدعم مدمج لأوضاع العرض المذكورة أعلاه، كما أنه يستخدم SSG افتراضياً لعرض صفحات الويب التي لا تحتاج إلى جلب البيانات (fetch). إذا كنت بحاجة إلى الحصول على بيانات من الخادم، فسيتم خلطها مع CSR (هجين/hybrid). إذا كنت ترغب في استخدام أوضاع عرض أخرى، يمكنك استخدام الوظائف التالية التي يوفرها Next.js:
| Function | Description |
|---|---|
| getStaticProps (Static Generation) | يجلب البيانات المطلوبة في وقت البناء ويضعها في ملف HTML |
| getStaticPaths (Static Generation) | يقرر المسارات الديناميكية (dynamic routes) التي يجب توليدها كملفات HTML في وقت البناء |
| getServerSideProps (Server-side Rendering) | دالة تعمل في كل مرة يرسل فيها المتصفح طلباً للحصول على البيانات المطلوبة |
الخلاصة
هذا كل شيء لليوم، لنكمل غداً~ غداً سأشارك معكم كيفية استخدام تلك الدوال الثلاث لتنفيذ مواقع ويب بأوضاع عرض مختلفة! ما هي أفكاركم حول أوضاع العرض التي تعلمتموها اليوم؟