SSR vs SSG vs ISR في Next.js.. إيه الفرق بينهم وإمتى تستخدم كل واحد؟

لو بتشتغل بـNext.js أكيد عدت عليك مصطلحات زي SSR وSSG وISR كل واحدة منهم ليها طريقة مختلفة لتوليد الصفحات وكل طريقة ليها وقتها ومميزاتها فتعالى نبسطهم سوا ونفهم الفرق بينهم واحده واحده.

• SSR (Server-Side Rendering)

  الـ SSR الصفحة بتتولد على السيرفر كل مرة اليوزر يفتحها. السيرفر بياخد الطلب بعدين يجيب البيانات ويجهز الصفحة قبل ما يبعتها للمستخدم.
  يعني لو عندك بيانات بتتغير كل شوية زي موقع أخبار أو صفحة فيها أرقام بتتحدث لحظيا هيكون مناسب.
  عشان نبسط الدنيا اكتر تخيل عندك موقع بيعرض ماتشات كوره فكل لما المستخدم يفتح الصفحة السيرفر هيجيب اخر النتائج من قاعدة البيانات.

• (Static-Site Generation)

  الـ SSG ببساطة بتولد الصفحات مرة واحدة وقت الـBuild وبتفضل ثابتة بعد كده فالمستخدم بياخد نسخة جاهزة على طول.
  يعني الحاجات اللي بياناتها مش بتتغير كتير زي صفحات مقال مثلا أو صفحة About Us هيكون مناسب.
  ومثال علي كدا بسيط لو موقعك عليه مقالة بعنوان إزاي تتعلم البرمجة؟ المقالة هنا مش بتتغير فبالتالي الصفحة بتتولد مرة واحدة وكل المستخدمين بياخدوا نفس النسخة.

• ISR (Incremental Static Regeneration)

  الـ ISR بقا حل وسط بين الاتنين الصفحات بتتولد زي الـ SSG وقت الـBuild لكن بتقدر تعملها تحديث تلقائي على فترات.
  يعني لو بياناتك ثابتة بس بتتغير بشكل دوري زي أسعار منتجات مثلا هيكون مناسب.
  اقرب مثال على كدا تخيل معايا موقع فيه أسعار موبايلات والأسعار بتتحدث كل 12 ساعة فالصفحة بتتولد أول مرة ثابتة وبعد كده السيرفر بيجددها تلقائي لما الأسعار تتغير.

الفرق بين SSR و SSG و ISR في Next.js بشكل عملي

SSR

تخيل إن عندك موقع بيعرض نتائج ماتشات الكورة، كل مرة المستخدم يفتح الصفحة، السيرفر بيجيب آخر البيانات ويجهز الصفحة ويردها للمستخدم. بمعنى إن الصفحة بتتولد لحظيًا مع كل طلب، وده يخليها مناسبة للمحتوى اللي بيتغير بشكل مستمر زي الأخبار أو الداشبورد. بس عيبه إنه ممكن يكون أبطأ لإن الصفحة بتتجهز وقت الطلب.

SSG

لو عندك مقالة بعنوان “إزاي تبدأ في البرمجة؟”، المقالة مش بتتغير، فبدل ما السيرفر يولدها كل مرة، Next.js بتولدها مرة واحدة وقت الـBuild، وكل المستخدمين بياخدوا نفس النسخة الجاهزة، وده بيخلي الموقع سريع جدًا ومناسب للصفحات اللي بياناتها ثابتة زي المدونات، صفحات المنتجات اللي مش بتتغير، أو صفحة About Us.

ISR

تخيل إنك عندك موقع بيع موبايلات، الأسعار مش بتتغير كل ثانية، لكن ممكن تتحدث كل 12 ساعة مثلًا. هنا نستخدم ISR، بحيث الصفحة بتتولد وقت الـBuild زي الـSSG، لكنها بتتحدث كل فترة معينة بشكل تلقائي. وده بيخلينا ناخد سرعة الـSSG مع إمكانية تحديث البيانات بدون الحاجة لإعادة بناء الموقع بالكامل.

الخلاصة:

• لو بياناتك بتتغير كل شوية؟ استخدم SSR.
• لو بياناتك ثابتة؟ استخدم SSG.
• لو بياناتك بتتغير بس كل فترة معينة؟ استخدم ISR.

وبكده نكون خلصنا شرحنا عن الفرق بين SSR و SSG و ISR. لو عندك سؤال أو استفسار، اكتب في الكومنتات. ومتنساش تقول رأيك في الشرح