في الموقع التقليدي يجلب المتصفح مع كل نقرة على رابط صفحة جديدة بالكامل من الخادم. أما في SPA فتُحمَّل الصفحة الرئيسية مرة واحدة، ثم تغيّر جافا سكريبت المحتوى داخل الصفحة نفسها. وتُجلب البيانات عبر API ولا يُحدَّث إلا الجزء اللازم.
مثال#
تأمل برنامج البريد الإلكتروني عبر الويب. عندما تنقر على رسالة تبقى القائمة الجانبية والقائمة الرئيسية في مكانهما ولا يتغير إلا نص الرسالة. لا تومض الصفحة ويكون الإحساس كالعمل في برنامج سطح مكتب.
المزايا#
- تجربة أسلس وأسرع بعد التحميل الأولي
- فصل الواجهة الأمامية عن الخلفية، مع التواصل عبر API
- إمكانية استخدام واجهة خلفية واحدة للويب والجوال
العيوب#
- قد يكون التحميل الأولي ثقيلاً، لأن جزءاً كبيراً من جافا سكريبت يجب تنزيله.
- إذا لم تُنفَّذ جيداً قد لا ترى محركات البحث المحتوى فيتضرر تحسين محركات البحث (SEO).
- زر الرجوع في المتصفح وعناوين الصفحات يحتاجان إلى إدارة دقيقة.
الحل الشائع#
في المواقع التي يهمها SEO تستخدم فرق كثيرة العرض من جهة الخادم ليكون HTML كاملاً في أول رد. وتُستخدم مكتبات مثل React وVue عادةً لبناء SPA.
خطأ شائع#
ليس لازماً تحويل كل موقع إلى SPA. فالمدونة وموقع الشركة والمتاجر البسيطة تفي عادةً بالغرض بالطريقة التقليدية أو المختلطة، وهي أبسط وأفضل.