SPA или MPA: одностраничное или многостраничное приложение
Основы3 минРедакция Innovialabs
Коротко
MPA загружает новую HTML-страницу на каждый переход и проще для SEO и контентных сайтов; SPA загружается один раз и меняет экран на клиенте, что удобнее для сложных приложений. Сегодня чаще всего выбирают гибрид.
Короткий ответ
- MPA (multi-page application) — каждый переход загружает новую HTML-страницу с сервера. Классические сайты, интернет-магазины, блоги, медиа.
- SPA (single-page application) — браузер один раз загружает приложение, а дальше JavaScript сам меняет экраны и подтягивает данные через API. Почта, CRM, дашборды, редакторы.
Если сайт в основном показывает контент и важен поиск — склоняйтесь к MPA. Если пользователь долго работает внутри интерфейса — к SPA. Для большинства новых проектов разумный ответ — гибрид, о нём ниже.
Как работает навигация
MPA: клик по ссылке, браузер запрашивает новую страницу, сервер возвращает готовый HTML, страница перерисовывается целиком. Просто, надёжно, кнопка «назад» и ссылки работают сами.
SPA: клик перехватывает клиентский роутер, меняет адрес через History API, запрашивает данные (обычно JSON) и перерисовывает только нужную часть. Переходы ощущаются мгновенными, но роутинг, загрузку, ошибки и восстановление прокрутки приходится реализовывать в коде.
Сравнение по главным критериям
| Критерий | MPA | SPA |
|---|---|---|
| Первая загрузка | быстрая, HTML сразу | медленнее, нужно загрузить и запустить JS |
| Последующие переходы | полная перезагрузка страницы | быстрые, без перезагрузки |
| SEO | естественно хорошее | требует SSR или пререндеринга |
| Сложность разработки | ниже | выше: роутинг, состояние, API |
| Состояние между экранами | теряется при переходе | сохраняется в памяти |
| Офлайн-режим | ограничен | возможен через Service Worker |
| Нагрузка на устройство | низкая | выше на слабых телефонах |
| Аналитика | работает из коробки | нужно отслеживать виртуальные переходы |
Производительность
MPA выигрывает на первом экране: браузер получает готовый HTML и может сразу его показать. Это важно для страниц, на которые приходят из поиска и рекламы.
SPA выигрывает на длинных сессиях: после загрузки приложения переходы требуют только данных. Но большой JavaScript-бандл замедляет старт, особенно на недорогих устройствах и медленном интернете. Помогают разделение кода (code splitting) и ленивая загрузка экранов.
SEO
Поисковые системы лучше всего работают с готовым HTML. У MPA он есть по умолчанию.
Классическая SPA отдаёт почти пустой HTML и заполняет его через JavaScript. Поисковики умеют выполнять JS, но это медленнее и менее предсказуемо. Поэтому для публичных страниц SPA обычно дополняют SSR (рендерингом на сервере) или пререндерингом.
Офлайн-режим
SPA уже содержит весь интерфейс в браузере, поэтому с помощью Service Worker её проще превратить в PWA, которая открывается без сети и синхронизирует данные позже. В MPA офлайн тоже возможен — можно кэшировать страницы, — но интерактивности без сервера будет меньше.
Гибриды: граница стирается
Современные инструменты объединяют сильные стороны обоих подходов:
- Next.js, Nuxt, SvelteKit, Remix — первая загрузка как в MPA (HTML с сервера), дальше переходы как в SPA.
- Astro — многостраничный сайт с интерактивными «островами».
- htmx, Hotwire Turbo — MPA, где переходы и обновления частей страницы происходят без полной перезагрузки.
- View Transitions API в браузерах позволяет делать плавные анимации между обычными страницами MPA.
Поэтому сегодня вопрос звучит не «SPA или MPA», а где нужен серверный HTML, а где — клиентская интерактивность.
Как выбрать
- Откуда приходят пользователи? Из поиска — нужен серверный HTML.
- Сколько длится сессия? Минуты в одном интерфейсе — в пользу SPA-поведения.
- Нужен ли офлайн? Да — SPA или PWA.
- Какая команда? Бэкенд-разработчики быстрее сделают MPA, фронтенд-команда — SPA или гибрид.
- Есть ли закрытая часть? Часто публичный сайт делают как MPA, а личный кабинет — как SPA.
Типичные ошибки
- Делать SPA для лендинга или блога и потом бороться с SEO.
- Не настроить отслеживание переходов в аналитике SPA.
- Тянуть огромный бандл вместо разделения кода.
- Ломать кнопку «назад» и глубокие ссылки в SPA.