Single Page Application (SPA)

Что такое SPA

SPA (Single Page Application; одностраничное приложение) — это метод разработки веб приложения, который загружает только одну веб-страницу, а затем обновляет части ее HTML структуры не перезагружая браузер.

Создание SPA не обходится без использования XMLHttpRequest и Fetch —  это API-интерфейсы JavaScript. Именно они отвечают за загрузку новых данных с сервера.

На сегодняшний день существуют множество frontend фреймворков и библиотек, которые помогают создавать одностраничные приложения. Самые мощные и популярные это Angular, React и Vue.

Разница между SPA и веб сайтом

На первый взгляд нет никакой разницы между простым сайтом и одностраничным приложением. В обоих случаях ресурс открывается в браузере, и пользователь взаимодействует с ним приблизительно одинаково, путешествует по нему используя гиперссылки. Но несмотря на это, между ними есть принципиальная разница.

Отличия между вебсайтом и SPA лежат в другой плоскости. Во-первых, если рассматривать крайние случаи, они разработаны используя разные технологии. Во-вторых, они работают по-разному. Рассмотрим более детально.

Технологии

Разработка веб сайтов и SPA может происходить с использованием разных технологий.

SPA обязательно сделаны на JavaScript. Могут быть задействованы различные фреймворки и вспомогательные технологии, например, Angular и TypeScript, но финальный код все равно будет JavaScript, без вариантов.

Веб сайт, в свою очередь, может лежать на сервере в виде простых HTML файлов связанные гиперссылками и не использовать ни одного языка программирования. Но это не очень эффективно или удобно, поэтому скорей всего для генерации страниц используется какая-нибудь бэк-энд технология, например, PHP.

Конечно, все вышесказанное справедливо если рассматривать граничные случаи, обычно в обеих вариантах используется микс из разных frontend и backend технологий.

Принцип работы

Принцип работы SPA и веб сайта — это главное отличие между ними.

В случае веб сайта, когда пользователь кликает по гиперссылке, браузер отправляет на сервер запрос на получение этой страницы. Когда ответ получен, браузер загружает ее вместо текущей. Для SPA, браузер также отправляет на сервер запрос, но уже другого типа и не на получение новой страницы, а на какие-то данные. Когда данные получены, браузер не перезагружает страницу целиком, а обновляет только ее часть используя полученные с сервера данные.