Skip to Sidebar Skip to Content
اقرأ-تك اقرأ-تك
ضيفنا الكريم

  • قائمة القراءة
  • تسجيل الدخول
  • الرئيسية
  • المقالات
  • خطط الاشتراك
  • - اصدارتنا
  • ورقة وقلم
  • مدونات فطين
  • شنطة مبرمج
  • النشرة الأسبوعية
  • كنوز
  • - تعرف علينا
  • من نحن
  • الشراكات
  • كتاب المحتوى
  • اكتب معنا
  • تواصل معنا
  • - بنود الخدمة
  • سياسة الخصوصية
  • الشروط والأحكام
الوسوم
  • Backend
  • Distributed Systems
  • System Design
  • Databases
  • LinkedIn
  • X
  • Facebook
  • Telegram
  • GitHub
جميع الحقوق محفوظة لمنصة اقرأ-تِك 2024©
Single vs. Multi Page Web Application
  • Frontend
  • Web Development

Single vs. Multi Page Web Application

الـ Web Applications تعد من أهم البرمجيات التي لا يمكن الاستغناء عنها في حياة الإنسان المعاصر وبتثبت كل يوم مدى فعاليتها وتأثيرها, و كمبرمج معاصر محتاج تعرف الفرق بين Single Page Application أو Multiple Page Application لأنه أول قرار بتاخده في برمجتك للموقع.

  • Alaa Elkzaz by Alaa Elkzaz
    Alaa Elkzaz Alaa Elkzaz
    Co-Founder & Software Engineer
    • Website
  • 15 Jan, 2024
  • •
  • 2 min read
  • Share on X
  • Share on Facebook
  • Share on LinkedIn
  • Share on Pinterest
  • Email

الـ Web Applications تعد من أهم البرمجيات التي لا يمكن الاستغناء عنها في حياة الإنسان المعاصر وبتثبت كل يوم مدى فعاليتها وتأثيرها, و كمبرمج معاصر محتاج تعرف الفرق بين Single Page Application أو Multiple Page Application لأنه أول قرار بتاخده في برمجتك للموقع.

فورقة وقلم و تعالوا نكتشف واحدة من أهم مفاهيم عالم الـ Frontend والـ Web 

بما اننا بنتكلم عن الـ Web يبقى حياتنا كلها هتبقي في الـ Browser, المتصفح بشكل عام بيشتغل بنظام الـ Client-Server فمع كتابتك لل URL الخاص بالموقع بيبتدي يكلم ال Server عشان يجيب صفحة الموقع وهنا بيت القصيد.

كيف يتم تحميل الموقع في المتصفح

ال Server بيبعت الموقع علي شكل ملف HTML وبيقوم المتصفح بإظهار الملف ليك عن طريق عملية ال Parsing and Rendering ولو لاقى انه محتاج External Resources تانية زي ال CSS Files, Javascript , Images  بيقوم بتحميلها.

في حالة الموقع متعدد الصفحات الـ MPA

 العملية دي بتتكرر كل لما تضغط على أي رابط في الصفحة أو تتفاعل معاها وال Browser هيحمّل صفحة جديدة من صفحات الموقع بنفس الطريقة, طبعًا ال Loading دا بياخد وقت ومكلف.

في حالة الموقع ذو الصفحة الواحدة ال SPA

فزي ما اسمه موضح هو بيحمّل صفحة واحدة بتكون عبارة عن HTML Template أولية ومعاها الملفات المطلوبة, طيب وبقية الموقع اوصله ازاي؟


Single Page Application

ال SPA بتعتمد بشكل كبير على الـ Javascript ولما بتتفاعل مع الصفحة وبدل ما اطلب صفحة جديدة كاملة بتسمح بعمل Requests لل Server تطلب بيها مكونات محددة هتغيرها في الصفحة وبكدا تتفادى انك تحمّل الصفحة كلها وتعملها Re Rendering من الصفر واللي هي عملية مكلفة وتبدله بال Dynamic Rendering للمكونات المختلفة في الصفحة.

💡
مثال على دا هو ال Navigation Bar الموجود أعلي أو على جانب أي موقع, المكون دا موجود في كل الصفحات. في الـ MPA هرجع أطلبه وأحمله في كل صفحة بطلبها, بينما في الـ SPA فبيتحمل أول مرة بس.

وكدا هو أداءه العام أسرع وسلس أكتر من الموقع متعدد الصفحات ولكن كل حاجة ليها مميزات وعيوب فتعالوا نشوف المميزات والعيوب في الصورة:

هذا المقال مخصص للأعضاء فقط

اشترك الآن وتصفح كافة المقالات المميزة واستمتع بمحتوى حصري وابق على اطلاع دائم بالتحديثات المستمرة.

اشترك الآن 🚀

هل لديك حساب؟ تسجيل الدخول

في هذا المقال
اشترك الآن واكمل قراءة المقال
قناة اقرأ-تِك على التليجرام قناة اقرأ-تِك على التليجرام

مقالات ذات صلة

  • Critical Rendering Path 2 min read

    Critical Rendering Path

    Saeed Khaled Saeed Khaled • 19 Aug, 2025
    Saeed Khaled Saeed Khaled
    Frontend Developer
    • Website
  • Thoughts on CORS Policy 3 min read

    Thoughts on CORS Policy

    Mohammed Lashein Mohammed Lashein • 1 Jul, 2025
    Mohammed Lashein Mohammed Lashein
    Full stack developer
    • Website
  • Idempotency in APIs 2 min read

    Idempotency in APIs

    Oussama Djaidri Oussama Djaidri • 16 Jun, 2025
    Oussama Djaidri Oussama Djaidri
    Front-End Engineer
    • Website
  • Browser & Server Negotiation Behind The Scene 2 min read

    Browser & Server Negotiation Behind The Scene

    Saeed Khaled Saeed Khaled • 22 Apr, 2025
    Saeed Khaled Saeed Khaled
    Frontend Developer
    • Website
  • Introduction Into Robots.txt 1 min read

    Introduction Into Robots.txt

    Saeed Khaled Saeed Khaled • 5 Apr, 2025
    Saeed Khaled Saeed Khaled
    Frontend Developer
    • Website
  • Tailwindcss 1 min read

    Tailwindcss

    Alaa Elkzaz Alaa Elkzaz • 31 Mar, 2025
    Alaa Elkzaz Alaa Elkzaz
    Co-Founder & Software Engineer
    • Website
  • Cross-Tab Communication with Broadcast Channel API 1 min read

    Cross-Tab Communication with Broadcast Channel API

    Ahmed Saber Ahmed Saber • 27 Feb, 2025
    Ahmed Saber Ahmed Saber
    Front-End Engineer
    • Facebook
    • Website
  • Introduction Into Cascade in CSS Part 2 2 min read

    Introduction Into Cascade in CSS Part 2

    Ibrahim Harchiche Ibrahim Harchiche • 11 Feb, 2025
    Ibrahim Harchiche Ibrahim Harchiche
    Frontend Developer
    • Website
  • NextJS Caching Mechanisms 1 min read

    NextJS Caching Mechanisms

    Ali Alaa El-Din Ali Alaa El-Din • 11 Feb, 2025
    Ali Alaa El-Din Ali Alaa El-Din
    Front End Developer
    • Website
  • HTTP Caching 2 min read

    HTTP Caching

    Saeed Khaled Saeed Khaled • 29 Jan, 2025
    Saeed Khaled Saeed Khaled
    Frontend Developer
    • Website

اشترك الآن بنشرة اقرأ‑تِك الأسبوعية

لا تدع أي شيء يفوتك. واحصل على أحدث المقالات المميزة مباشرة إلى بريدك الإلكتروني وبشكل مجاني!

اقرأ-تك اقرأ-تك
  • الرئيسية
  • المقالات
  • خطط الاشتراك
  • - اصدارتنا
  • ورقة وقلم
  • مدونات فطين
  • شنطة مبرمج
  • النشرة الأسبوعية
  • كنوز
  • - تعرف علينا
  • من نحن
  • الشراكات
  • كتاب المحتوى
  • اكتب معنا
  • تواصل معنا
  • - بنود الخدمة
  • سياسة الخصوصية
  • الشروط والأحكام
الوسوم
  • Backend
  • Distributed Systems
  • System Design
  • Databases
  • LinkedIn
  • X
  • Facebook
  • Telegram
  • GitHub
جميع الحقوق محفوظة لمنصة اقرأ-تِك 2024©