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
  • ١٥ يناير، ٢٠٢٤
  • •
  • 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 فبيتحمل أول مرة بس.

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

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

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

اشترك الآن 🚀

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

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

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

  • Browser & Server Negotiation Behind The Scene 2 min read

    Browser & Server Negotiation Behind The Scene

    Saeed Khaled Saeed Khaled • ٢٢ أبريل، ٢٠٢٥
    Saeed Khaled Saeed Khaled
    Frontend Developer
    • Website
  • Introduction Into Robots.txt 1 min read

    Introduction Into Robots.txt

    Saeed Khaled Saeed Khaled • ٥ أبريل، ٢٠٢٥
    Saeed Khaled Saeed Khaled
    Frontend Developer
    • Website
  • Tailwindcss 1 min read

    Tailwindcss

    Alaa Elkzaz Alaa Elkzaz • ٣١ مارس، ٢٠٢٥
    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 • ٢٧ فبراير، ٢٠٢٥
    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 • ١١ فبراير، ٢٠٢٥
    Ibrahim Harchiche Ibrahim Harchiche
    Frontend Developer
    • Website
  • NextJS Caching Mechanisms 1 min read

    NextJS Caching Mechanisms

    Ali Alaa El-Din Ali Alaa El-Din • ١١ فبراير، ٢٠٢٥
    Ali Alaa El-Din Ali Alaa El-Din
    Front End Developer
    • Website
  • HTTP Caching 2 min read

    HTTP Caching

    Saeed Khaled Saeed Khaled • ٢٩ يناير، ٢٠٢٥
    Saeed Khaled Saeed Khaled
    Frontend Developer
    • Website
  • Closures in JavaScript 2 min read

    Closures in JavaScript

    Abdallah Elnashar Abdallah Elnashar • ٢٦ يناير، ٢٠٢٥
    Abdallah Elnashar Abdallah Elnashar
    Frontend Developer
    • Website
  • Race Conditions in Frontend 3 min read

    Race Conditions in Frontend

    Saeed Khaled Saeed Khaled • ٢٨ ديسمبر، ٢٠٢٤
    Saeed Khaled Saeed Khaled
    Frontend Developer
    • Website
  • React Props Best Practices for Handling Large Objects 1 min read

    React Props Best Practices for Handling Large Objects

    Ahmed Hany Ahmed Hany • ٢٢ ديسمبر، ٢٠٢٤
    Ahmed Hany Ahmed Hany
    Frontend Developer
    • Website

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

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

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