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

SSR (Server-Side Rendering)​

الـ SSR يعني الصفحة بتتولد على السيرفر كل مرة المستخدم بيفتحها.
بمعنى إن السيرفر بيستقبل الطلب، وبعد كده يجيب البيانات من الـAPI أو قاعدة البيانات، ويجهز الصفحة ويرجعها للمستخدم.

يعني لما الصفحة بتفتح، السيرفر بيعمل كل حاجة في اللحظة دي.
وده بيخليها مثالية للحاجات اللي بياناتها بتتغير بسرعة زي:

• مواقع الأخبار
• صفحات النتائج اللحظية (زي نتائج الماتشات )
• صفحات الـDashboard اللي بتتعرض فيها أرقام متغيرة

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

export async function getServerSideProps() {
const res = await fetch("https://api.example.com/matches");
const data = await res.json();

return {
props: { matches: data },
};
}

الطريقة دي مميزة جدًا لما تكون محتاج تعرض بيانات محدثة في كل refresh للموقع.

---

SSG (Static Site Generation)​

الـ SSG بقى هو العكس تقريبًا
الصفحة بتتولد مرة واحدة بس وقت الـBuild، وبعد كده بتفضل ثابتة وكل المستخدمين بياخدوا نفس النسخة الجاهزة.

النتيجة؟ سرعة خرافية وموقع خفيف جدًا لأن كل حاجة بتتحمل من ملفات ثابتة (Static Files).

دي بتكون مناسبة جدًا للحاجات اللي بياناتها مش بتتغير كتير زي:

• صفحات المقالات
• صفحات About Us
• الـPortfolio الشخصي

مثال بسيط:
موقع عليه مقالة بعنوان "إزاي تتعلم البرمجة؟"
المقالة دي مش هتتغير كل يوم، فالأفضل تبنيها مرة وقت الـbuild وخلاص.

export async function getStaticProps() {
const res = await fetch("https://api.example.com/articles/learn-programming");
const data = await res.json();

return {
props: { article: data },
};
}

الـSSG بيخلي الموقع أسرع بكتير لأن الصفحة مش بتتولد من السيرفر كل مرة.

---

ISR (Incremental Static Regeneration)​

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

وده مناسب جدًا للحاجات اللي بتتغير كل فترة، زي مثلًا:

• أسعار المنتجات
• الترندات اليومية
• قوائم الخدمات اللي بتتحدث أسبوعيًا

مثال عملي:
تخيل عندك موقع بيعرض أسعار الموبايلات، والأسعار بتتحدث كل 12 ساعة.
يبقى الحل المثالي إنك تستخدم ISR.

export async function getStaticProps() {
const res = await fetch("https://api.example.com/mobiles");
const data = await res.json();

return {
props: { mobiles: data },
revalidate: 43200, // 12 ساعة = 43200 ثانية
};
}

يعني الصفحة بتتولد أول مرة، وبعد 12 ساعة السيرفر بيجددها تلقائيًا.
المستخدم بيشوف صفحة سريعة جدًا، وفي نفس الوقت البيانات بتتحدث بانتظام.

طيب أختار إيه؟ ​

عشان الموضوع يبقى سهل، شوف الجدول ده:

الحالة	النوع المناسب	مثال عملي
البيانات بتتغير باستمرار	SSR	صفحة نتائج ماتشات مباشرة
البيانات ثابتة تقريبًا	SSG	صفحة مقال أو About Us
البيانات شبه ثابتة بس بتتحدث كل فترة	ISR	أسعار منتجات أو مقالات بتتحدث دوريًا

ببساطة:

• لو بياناتك بتتحدث دايمًا → استخدم SSR.
• لو بياناتك ثابتة → استخدم SSG.
• لو بياناتك بتتغير كل فترة → استخدم ISR.

نصايح سريعة للمبرمجين ​

• ما تستخدمش SSR في كل حاجة، لأنه بيزود الضغط على السيرفر.
• لو السرعة أولوية، دايمًا ابدأ بـSSG أو ISR.
• جرب أدوات Next.js زي next build وnext export لفهم أداء المشروع.
• لو عندك موقع eCommerce صغير، ISR ممكن يكون أفضل توازن بين الأداء والتحديث.

الخلاصة ​

الـNext.js بيدي مرونة رهيبة في اختيار طريقة عرض الصفحات.
اللي يفرق هو نوع المشروع واحتياجك:

• SSR لو عايز بيانات لحظية.
• SSG لو عايز سرعة وتحميل فوري.
• ISR لو عايز الاتنين مع بعض

لو عندك سؤال أو حابب تشوف مقارنة بالكود بين الثلاث طرق قولّي في الكومنتات