Лет десять назад SPA на React или Vue был модным выбором по умолчанию. Сегодня индустрия откатывает маятник: Next.js App Router, Astro, Remix продвигают MPA-подход с серверным рендерингом и островами интерактивности. Разбираем, что реально лучше и для каких задач.
SPA: классическая архитектура
Single Page Application — одна HTML-страница, JavaScript подгружает контент и меняет UI без полной перезагрузки. Классика: Create React App, Vite + React Router, Vue + Vue Router. Бэкенд — отдельный API, фронт — статика, отдаваемая через CDN.
Плюсы SPA: отзывчивый UX без полных перезагрузок, чёткое разделение фронта и бэка, возможность сделать офлайн-режим через Service Worker. Идеально для приложений с сильной интерактивностью: личные кабинеты, дашборды, графические редакторы, чаты.
Минусы: первый рендер долгий — пока JS не загрузился и не выполнился, экран пустой. SEO требует SSR или пререндеринга. Размер бандла растёт с фичами и без вдумчивого code splitting убивает мобильные устройства.
MPA: возвращение мульти-страниц
Multi-Page Application с современным стеком — это Next.js 15 в режиме SSG/ISR, Astro с островами, или Remix. Каждая страница рендерится сервером (или статически), JavaScript подгружается только для интерактивных кусков.
Плюсы: первая отрисовка моментальная (HTML уже готов), отличный SEO без танцев, минимальный JS-бандл, лучше Core Web Vitals. Современные инструменты дают плавную навигацию — <Link> в Next.js префетчит соседние страницы и переход кажется мгновенным.
Минусы: сложнее организовать богато интерактивные приложения с глобальным состоянием — приходится тащить состояние через URL и кэш. Часть UX-паттернов (виртуализированные списки на 10k записей, сложные drag-n-drop) проще писать в SPA-режиме.
React Server Components как третий путь
В 2026 граница между SPA и MPA стирается. Server Components в Next.js позволяют рендерить часть UI на сервере (без JS на клиенте), а часть — как обычные клиентские компоненты. Получается «MPA с островами интерактивности» — лучшее из двух миров.
В наших проектах правило простое: SEO-страницы — серверные, формы и виджеты — клиентские, состояние авторизации — через cookies и серверные действия. Объём JS, доезжающего до пользователя, падает в 3–5 раз по сравнению с чистым React SPA.
Что выбрать по типу проекта
Сайт компании, блог, маркетплейс, e-commerce — MPA с серверным рендерингом, без вариантов. SEO критичен, конверсия зависит от Core Web Vitals, бюджет JS должен быть минимальным.
Личный кабинет, b2b-приложение, дашборд аналитики — SPA или гибрид. Здесь SEO не нужен, зато важна отзывчивость интерфейса и кэширование данных на клиенте. React Query плюс Vite дают отличный DX.
CRM, ERP, админки — обычно SPA. Долгие сессии, сложные формы, оптимистичные апдейты. Часть проектов делаем гибридом: оболочка на Next.js (для авторизации, ролей, общей навигации), внутри — SPA-острова для рабочих модулей.
Производительность: цифры с реальных проектов
MPA на Next.js 15 со Server Components: TTFB 80–250 мс, FCP менее 1 секунды, JS на главной 60–120 КБ. Lighthouse Performance 95+ из коробки.
SPA на чистом React + Vite: TTFB зависит от хостинга (обычно 50–150 мс на CDN), FCP 1.5–3 секунды на медленном 4G, JS 200–600 КБ. Lighthouse 70–85 без серьёзной оптимизации.
Разница в 2–3 раза в пользу MPA на сценариях, где важна первая отрисовка — лендинги, каталоги, статьи. На приложениях после загрузки SPA выигрывает за счёт мгновенных переходов между состояниями без сетевых запросов.
Итого
SPA остаётся правильным выбором для приложений с долгой сессией и сложным состоянием. MPA с современным стеком — для всего, что должно быть найдено в Google и быстро открываться. React Server Components размывают границу: гибрид сегодня лучший выбор для большинства проектов, где есть и публичная часть, и личный кабинет.
Частые вопросы
Чем SPA отличается от MPA в 2026 году?
Single Page Application — одна HTML-страница, JavaScript подгружает контент и меняет UI без полной перезагрузки. Классика: Vite + React Router. Multi-Page Application с современным стеком — это Next.js 15 в режиме SSG/ISR, Astro с островами, или Remix. Каждая страница рендерится сервером, JavaScript подгружается только для интерактивных кусков. SPA даёт отзывчивый UX без перезагрузок, MPA даёт мгновенный первый рендер, отличный SEO и минимальный JS-бандл. Граница стирается с Server Components.
Какие плюсы и минусы у SPA?
Плюсы SPA: отзывчивый UX без полных перезагрузок, чёткое разделение фронта и бэка, возможность сделать офлайн-режим через Service Worker. Идеально для приложений с сильной интерактивностью: личные кабинеты, дашборды, графические редакторы, чаты. Минусы: первый рендер долгий — пока JS не загрузился и не выполнился, экран пустой. SEO требует SSR или пререндеринга. Размер бандла растёт с фичами и без вдумчивого code splitting убивает мобильные устройства.
Какие плюсы и минусы у MPA с современным стеком?
Плюсы MPA: первая отрисовка моментальная (HTML уже готов), отличный SEO без танцев, минимальный JS-бандл, лучше Core Web Vitals. Современные инструменты дают плавную навигацию — Link в Next.js префетчит соседние страницы и переход кажется мгновенным. Минусы: сложнее организовать богато интерактивные приложения с глобальным состоянием — приходится тащить состояние через URL и кэш. Часть UX-паттернов (виртуализированные списки на 10k записей, сложные drag-n-drop) проще писать в SPA-режиме.
Что такое React Server Components как третий путь?
В 2026 граница между SPA и MPA стирается. Server Components в Next.js позволяют рендерить часть UI на сервере (без JS на клиенте), а часть — как обычные клиентские компоненты. Получается «MPA с островами интерактивности» — лучшее из двух миров. Правило: SEO-страницы серверные, формы и виджеты клиентские, состояние авторизации через cookies и серверные действия. Объём JS, доезжающего до пользователя, падает в 3–5 раз по сравнению с чистым React SPA.
Что выбрать для разных типов проектов — SPA или MPA?
Сайт компании, блог, маркетплейс, e-commerce — MPA с серверным рендерингом, без вариантов. SEO критичен, конверсия зависит от Core Web Vitals, бюджет JS должен быть минимальным. Личный кабинет, b2b-приложение, дашборд аналитики — SPA или гибрид. Здесь SEO не нужен, зато важна отзывчивость интерфейса. CRM, ERP, админки — обычно SPA. Долгие сессии, сложные формы, оптимистичные апдейты. Часть проектов делаем гибридом: оболочка на Next.js, внутри SPA-острова.
Какая разница в производительности между SPA и MPA?
MPA на Next.js 15 со Server Components: TTFB 80–250 мс, FCP менее 1 секунды, JS на главной 60–120 КБ. Lighthouse Performance 95+ из коробки. SPA на чистом React + Vite: TTFB зависит от хостинга (50–150 мс на CDN), FCP 1.5–3 секунды на медленном 4G, JS 200–600 КБ. Lighthouse 70–85 без серьёзной оптимизации. Разница в 2–3 раза в пользу MPA на сценариях, где важна первая отрисовка. На приложениях после загрузки SPA выигрывает за счёт мгновенных переходов.