در سایت سنتی، با هر کلیک روی لینک، مرورگر صفحه‌ی کاملاً جدیدی از سرور می‌گیرد. در SPA فقط یک بار صفحه‌ی اصلی بارگذاری می‌شود و بعد جاوااسکریپت محتوا را در همان صفحه عوض می‌کند. داده‌ها از طریق API گرفته می‌شود و فقط همان بخشی که لازم است به‌روز می‌شود.
مثال#
نرم‌افزار ایمیل تحت وب را در نظر بگیرید. وقتی روی یک نامه کلیک می‌کنید، لیست کناری و منو سر جایشان می‌مانند و فقط متن نامه عوض می‌شود. صفحه چشمک نمی‌زند و حس کار با یک برنامه‌ی دسکتاپ را دارد.
مزایا#
- تجربه‌ی روان‌تر و سریع‌تر بعد از بارگذاری اولیه
- جدا بودن فرانت‌اند و بک‌اند، با ارتباط از راه API
- امکان استفاده از یک بک‌اند برای وب و موبایل
معایب#
- بارگذاری اولیه ممکن است سنگین باشد، چون بخش بزرگی از جاوااسکریپت باید دانلود شود.
- اگر درست پیاده نشود، موتورهای جستجو ممکن است محتوا را نبینند و سئو آسیب ببیند.
- دکمه‌ی برگشت مرورگر و آدرس صفحات نیاز به مدیریت دقیق دارد.
راهکار رایج#
برای سایت‌هایی که سئو مهم است، بسیاری از تیم‌ها از رندر سمت سرور استفاده می‌کنند تا HTML کامل در پاسخ اول باشد. کتابخانه‌هایی مثل React و Vue معمولاً برای ساخت SPA به‌کار می‌روند.
اشتباه رایج#
هر سایتی را لازم نیست SPA کرد. وبلاگ، سایت شرکتی و فروشگاه‌های ساده معمولاً با روش سنتی یا ترکیبی ساده‌تر و بهتر جواب می‌دهند.