أكاديمية جابر سمير

💻 يعني إيه SSR و SSG و ISR و CSR؟ وإمتى أستخدم كل واحدة؟

من أول ما بدأت أشتغل في تطوير الويب، وأنا دايمًا بسأل نفسي:
"هو إيه الفرق بين الطرق المختلفة اللي ممكن أستخدمها في عرض الصفحات؟ وليه كل شوية ألاقي اختصارات غريبة زي SSR و SSG؟"

بعد شوية تجربة وقراءة، قدرت أفهم الموضوع كويس، وحبيت أشاركه مع أي حد بيبدأ أو حتى شغال وعايز يرتب أفكاره:

🖥️ SSR - Server-Side Rendering

ده معناه إن الصفحة بتتولد على السيرفر كل مرة المستخدم بيطلبها. يعني السيرفر بيشوف البيانات، يعمل منها صفحة HTML، ويبعتها للمتصفح.

✅ مناسب لو المحتوى بيتغير كتير أو حسب المستخدم.
مثال: صفحة الحساب الشخصي أو الطلبات.
❌ العيب إنه بياخد وقت أطول شوية لأن الصفحة بتتولد كل مرة.

📄 SSG - Static Site Generation

ده العكس تمامًا… الصفحة بتتولد مرة واحدة وقت بناء المشروع، وبتتبعت للمستخدم كملف ثابت HTML.

✅ سريع جدًا في التصفح وممتاز لـ SEO.
مثال: مدونة، صفحة "من نحن"، أو أي محتوى مابيتغيرش كتير.
❌ لو عايز تحدث المحتوى، لازم تعيد بناء الموقع.

🔁 ISR - Incremental Static Regeneration

حل وسط بين الاثنين. بتولد الصفحة مرة وقت الـ build، وبعد كده ممكن تتجدد لوحدها في الخلفية كل فترة تحددها.

✅ مفيد لما تكون عايز السرعة، بس كمان البيانات تتحدث كل شوية.
مثال: صفحة منتجات بتتحدث كل ساعة.
❌ محتاج شوية إعدادات زيادة، بس مفيد جدًا.

👨‍💻 CSR - Client-Side Rendering

في الطريقة دي، المتصفح هو اللي بيعرض الصفحة بعد ما توصل له البيانات من السيرفر، من خلال JavaScript.

✅ مناسب لتطبيقات فيها تفاعل كتير بين المستخدم والموقع.
مثال: لوحة تحكم، صفحات بعد تسجيل الدخول.
❌ التحميل الأول ممكن يكون بطيء، والسيو (SEO) ضعيف.

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

وأكتر حاجة عجبتني في Next.js إنه بيديني مرونة أختار كل صفحة تتعرض إزاي… SSR ولا SSG ولا حتى ISR أو CSR.

لو بتشتغل على مشروع كبير أو حتى صغير، ضروري تفهم الفرق ده وتستخدمه صح.

🔄 لو شايف إن المحتوى مفيد، اعمل شير لحد ممكن يستفيد.
ولو ليك تجربة أو رأي مختلف، شاركه معانا في الكومنتات 👇

#برمجة

يعني إيه Framework؟

> 🤔 ناس كتير بتسأل: يعني إيه Framework في البرمجة؟

ببساطة، هو إطار جاهز بيساعدك تبرمج أسرع من غير ما تبدأ من الصفر كل مرة.

✅ Laravel = Framework للغة PHP
✅ React = Framework/Library لـ JavaScript
✅ ASP.NET Core = Framework للغة C #

يعني بدل ما تعيد اختراع العجلة… بتستخدم أدوات جهزها ناس قبلك علشان تشتغل أسرع وأنضف.

الفرق بين Frontend و Backend

> 👨‍💻 لو لسه داخل مجال البرمجة، لازم تعرف الفرق بين:

✅ Frontend: ده الجزء اللي المستخدم بيشوفه ويتفاعل معاه، زي التصميم، الأزرار، الألوان، التنسيقات... بنستخدم فيه HTML, CSS, JavaScript.

✅ Backend: ده اللي بيحصل ورا الكواليس، زي قواعد البيانات، تسجيل الدخول، معالجة الطلبات... بنستخدم لغات زي PHP, Node.js, Python, C #.

الاتنين بيكملوا بعض، وده اسمه Full-Stack لو اتعلمتهم مع بعض 💪