Виды веб-приложений: SPA и MPA

MPA и SPA - это два основных способа строить веб-приложения, отличающиеся тем, как браузер общается с сервером и обновляет страницу. MPA (Multi-Page Application) загружает новую страницу целиком при каждом клике, а SPA (Single-Page Application) меняет только нужную часть без полной перезагрузки. Эта статья для новичков: разберём просто, с аналогиями и примерами.

Что такое MPA?

MPA - это классический подход, как работают большинство сайтов. Когда ты кликаешь на ссылку (например, "О нас" на главной), браузер отправляет запрос серверу, тот готовит полную новую HTML-страницу (с текстом, картинками) и отправляет обратно. Браузер перезагружает всё заново.

Плюсы:

Легко понять и сделать (сервер делает всю работу).
Поисковики (Google) видят весь контент сразу.
Страницы быстро открываются в первый раз.

Минусы:

Каждый переход - задержка (1–2 секунды).
Больше трафика по интернету.

Примеры: Сайты вроде Википедии или онлайн-магазинов (переход по товарам).

Аналогия: Как переключение телевизионных каналов — каждый раз заново настраивается картинка.

Что такое SPA?

SPA загружает один "скелет" - базовый HTML-файл с JavaScript. Дальше браузер сам запрашивает данные (через API — как посылки с сервера) и обновляет только изменившуюся часть экрана. Ссылки не перезагружают страницу, а меняют адрес в строке браузера (клиентский роутинг).

Плюсы:

Переходы мгновенные (как в приложении на телефоне).
Меньше запросов после старта.
Крутой интерфейс.

Минусы:

Большой размер первого файла (JS может быть мегабайтами).
Поисковики видят мало (нужно специальные трюки).
Не работает без JavaScript.

Примеры: Gmail (письма меняются без перезагрузки), Twitter/X или Trello.

Аналогия: Как мобильное приложение — один запуск, дальше всё внутри летает.

MPA vs SPA: Сравнение в таблице

Характеристика	MPA	SPA
Загрузка страниц	Полная перезагрузка каждый раз	Только нужные кусочки
Скорость переходов	Медленнее (задержка)	Быстрее (без релоада)
SEO (поисковики)	Хорошо работает из коробки	Нужно дорабатывать
Когда выбрать	Простые сайты, контент	Интерактивные сервисы

SSR и CSR: Где "рисуется" страница?

Это дополнение: где браузер получает готовый вид. Можно комбинировать с MPA/SPA.

SSR (Server-Side Rendering): Сервер "рисует" HTML с данными и отправляет готовое.
- Плюс: Быстро видно, хорошо для SEO.
- Минус: Сервер устает.
- Пример: веб-приложение на ASP.NET Core MVC.
CSR (Client-Side Rendering): Сервер даёт пустой шаблон + JS, браузер сам строит страницу.
- Плюс: Сервер лёгкий.
- Минус: Сначала пустой экран.
- Пример: Обычный React-сайт.

Гибрид (SSR + CSR) — золотая середина для современных приложений. Теперь ты знаешь, как выбрать подход для своего первого сайта!

Test

dfgdfg

public Test()
{
    var x = 0;
    return yield;
}