Как работает SPA

При первом открытии браузер загружает HTML-оболочку, CSS и JavaScript-бандл приложения. Дальнейшая работа полностью клиентская: клики по ссылкам перехватываются JavaScript-роутером, который обновляет URL через history.pushState и рендерит новый компонент в DOM — без запроса к серверу за HTML.

Традиционный MPA:
  /catalog → [HTTP GET] → server HTML → браузер рендерит

SPA:
  /catalog → router.push('/catalog') → компонент Catalog() → DOM update

Данные подгружаются через API-запросы к бэкенду, но каркас страницы остаётся прежним. Это и есть источник плавности — и источник сложностей с интеграцией сторонних SDK.

Проблемы интеграции в SPA

Аналитика. Pageview не происходит при смене маршрута. Каждый роутер-переход должен явно вызывать analytics.page() или его эквивалент. В GA4 — gtag('event', 'page_view', {...}). Без этого все визиты выглядят как одна бесконечная сессия на одной странице.

Персонализация и рекомендации. SDK персонализации инициализируется при загрузке страницы. При переходе в SPA он не переинициализируется автоматически — нужно явно вызывать метод реинициализации при смене маршрута, передавая новый тип страницы (pdp, category, search).

A/B тестирование. Вариация теста применяется при первой инициализации SDK. Если переход на целевую страницу происходит внутри SPA (без перезагрузки), SDK не «видит» смену страницы и может не применить нужную вариацию. Требуется явный lifecycle hook на смену маршрута.

Совет: при разработке на React/Next.js используйте useEffect с зависимостью от pathname для вызова SDK-методов при смене маршрута. Это стандартное решение, задокументированное в большинстве SDK персонализации.

SPA vs MPA vs SSR: выбор для e-commerce

Архитектура SEO Персонализация UX скорость
MPA (традиционный) Отлично Стандартная интеграция Перезагрузки при переходах
SPA (CSR) Плохо без доп. мер Сложная интеграция Плавная навигация
SSR / Next.js Отлично Серверная интеграция Плавная навигация

Для e-commerce золотой стандарт на 2025 год — SSR-фреймворк (Next.js, Nuxt) с возможностями SPA. Это решает и SEO, и персонализацию на уровне сервера, и плавность навигации.