- بواسطة x32x01 ||
الفرق بين SSR و SSG و ISR في Next.js 
لو بتشتغل بـNext.js أكيد عدت عليك مصطلحات زي SSR وSSG وISR كل واحدة منهم ليها طريقة مختلفة لتوليد الصفحات وكل طريقة ليها وقتها ومميزاتها فتعالى نبسطهم سوا ونفهم الفرق بينهم واحده واحده.
يعني لو عندك بيانات بتتغير كل شوية زي موقع أخبار أو صفحة فيها أرقام بتتحدث لحظيا هيكون مناسب.
عشان نبسط الدنيا اكتر تخيل عندك موقع بيعرض ماتشات كوره فكل لما المستخدم يفتح الصفحة السيرفر هيجيب اخر النتائج من قاعدة البيانات.
يعني الحاجات اللي بياناتها مش بتتغير كتير زي صفحات مقال مثلا أو صفحة About Us هيكون مناسب.
ومثال علي كدا بسيط لو موقعك عليه مقالة بعنوان إزاي تتعلم البرمجة؟ المقالة هنا مش بتتغير فبالتالي الصفحة بتتولد مرة واحدة وكل المستخدمين بياخدوا نفس النسخة.
يعني لو بياناتك ثابتة بس بتتغير بشكل دوري زي أسعار منتجات مثلا هيكون مناسب.
اقرب مثال على كدا تخيل معايا موقع فيه أسعار موبايلات والأسعار بتتحدث كل 12 ساعة فالصفحة بتتولد أول مرة ثابتة وبعد كده السيرفر بيجددها تلقائي لما الأسعار تتغير.
اظن مفيش ابسط من كده
طيب انا هختار إيه؟
ـ لو عندك بيانات بتتغير كل شويه: اختار SSR.
ـ لو البيانات ثابتة: اختار SSG.
ـ لو بياناتك شبه ثابتة مع شوية تغييرات دوريه كل فتره معينه: اختار ISR.
منقول عن م/مجدى عاطف
لو بتشتغل بـNext.js أكيد عدت عليك مصطلحات زي SSR وSSG وISR كل واحدة منهم ليها طريقة مختلفة لتوليد الصفحات وكل طريقة ليها وقتها ومميزاتها فتعالى نبسطهم سوا ونفهم الفرق بينهم واحده واحده.
1ـ SSR (Server-Side Rendering)
الـ SSR الصفحة بتتولد على السيرفر كل مرة اليوزر يفتحها. السيرفر بياخد الطلب بعدين يجيب البيانات ويجهز الصفحة قبل ما يبعتها للمستخدم.يعني لو عندك بيانات بتتغير كل شوية زي موقع أخبار أو صفحة فيها أرقام بتتحدث لحظيا هيكون مناسب.
عشان نبسط الدنيا اكتر تخيل عندك موقع بيعرض ماتشات كوره فكل لما المستخدم يفتح الصفحة السيرفر هيجيب اخر النتائج من قاعدة البيانات.
2ـ SSG (Static-Site Generation)
الـ SSG ببساطة بتولد الصفحات مرة واحدة وقت الـBuild وبتفضل ثابتة بعد كده فالمستخدم بياخد نسخة جاهزة على طول.يعني الحاجات اللي بياناتها مش بتتغير كتير زي صفحات مقال مثلا أو صفحة About Us هيكون مناسب.
ومثال علي كدا بسيط لو موقعك عليه مقالة بعنوان إزاي تتعلم البرمجة؟ المقالة هنا مش بتتغير فبالتالي الصفحة بتتولد مرة واحدة وكل المستخدمين بياخدوا نفس النسخة.
3ـ ISR (Incremental Static Regeneration)
الـ ISR بقا حل وسط بين الاتنين الصفحات بتتولد زي الـ SSG وقت الـBuild لكن بتقدر تعملها تحديث تلقائي على فترات.يعني لو بياناتك ثابتة بس بتتغير بشكل دوري زي أسعار منتجات مثلا هيكون مناسب.
اقرب مثال على كدا تخيل معايا موقع فيه أسعار موبايلات والأسعار بتتحدث كل 12 ساعة فالصفحة بتتولد أول مرة ثابتة وبعد كده السيرفر بيجددها تلقائي لما الأسعار تتغير.
اظن مفيش ابسط من كده
طيب انا هختار إيه؟
ـ لو عندك بيانات بتتغير كل شويه: اختار SSR.
ـ لو البيانات ثابتة: اختار SSG.
ـ لو بياناتك شبه ثابتة مع شوية تغييرات دوريه كل فتره معينه: اختار ISR.
جدول بسيط موضح الفرق بين SSR و SSG و ISR في Next.js
وبكده نكون خلصنا شرحنا عن الفرق بين SSR و SSG و ISR. لو عندك سؤال أو استفسار، اكتب في الكومنتات. ومتنساش تقول رأيك في الشرح! منقول عن م/مجدى عاطف