SPA (Single page application): что это, и чем они полезны бизнесу?

4 мин
30.08.2020

Одностраничные приложения (Single page application) — это сайты, которые работают без перезагрузки страниц. Работают на JavaScript, для навигации используют встроенный роутинг и имеют одну точку выхода в виде HTML-файла, либо же подгружают страницы динамически с сервера, используя технологию AJAX.

Практически все современные сервисы, с которыми мы взаимодействуем каждый день (Facebook, Instagram, Gmail, YouTube, блог, на котором вы сейчас находитесь) — это SPA-приложения.

В чём преимущество SPA-сайтов?

Скорость

SPA в разы быстрее обычных сайтов. Потому что большую часть данных с сервера получают при первой загрузке и при дальнейшем взаимодействии с сайтом происходит подгрузка только нужной информации с сервера с помощью JavaScript.

При стандартном же подходе (Multi-Page application) при каждом переходе пользователя на новый раздел — сайт выполняет полную перезагрузку и повторно запрашивает данные с сервера.

Пользователь, перемещаясь по страницам такого сайта, будет ждать гораздо меньше времени по сравнению с полной перезагрузкой страницы.

Плавное взаимодействие пользователя с сайтом

Помимо скорости, у SPA есть существенное преимущество — более плавное взаимодействие пользователя с сайтом. Пользователь практически не замечает переходов, переключаясь между разделами сайта.

Благодаря тому, что переходы между разделами происходят мгновенно и незаметно — средняя продолжительность сеанса на SPA выше, чем на обычном сайте.

Ещё один плюс SPA — возможность создавать необычные эффекты переходов между разделами: это вовлекает пользователя в изучение контента, и помогает удерживать внимание.

А ещё SPA могут заменить мобильное приложение, если недостаточно бюджета на разработку сайта и приложения одновременно.

Удобство в разработке и масштабировании

Если на сайте много динамического контента, который зависит от действий пользователя (например: интернет-магазин, где в зависимости от фильтра выводится нужный контент) — то с SPA реализовать подобный функционал гораздо проще.

Минусы SPA

SPA генерируют контент динамически в браузере с помощью JavaScript’а. Работает это следующим образом:

  1. Пользователь открывает SPA в браузере.
  2. Приложение посылает запрос на сервер.
  3. Сервер возвращает статические файлы, такие как: картинки, шрифты, JS и CSS файлы, а также пустой шаблон HTML-страницы с базовой разметкой, куда и будет рендериться SPA.
  4. JavaScript динамически генерирует HTML и вставляет его в шаблон, который получил с сервера.

И поскольку SPA получают с сервера пустой HTML-шаблон — поисковые системы не могут проиндексировать контент сайта. Из этого следует, что большинство SPA невозможно продвинуть по SEO. Есть несколько путей решения этой проблемы, о них расскажем ниже.

SPA дороже в разработке и поддержке, по сравнению с обычными сайтами. Но этот минус перекрывается плюсами, описанными выше.

Если вдруг случилось так, что у пользователя отключен JavaScript в браузере, то он увидит пустую страницу, потому что SPA без JavaScript’а не работают. Но, давайте будем честны, на дворе 2020 год и любой сайт в интернете не будет нормально работать без JavaScript’а.

Виды SPA

Можно выделить 3 основных вида одностраничных приложений:

1. CSR (Client Side Rendering) SPA

Обычное SPA, работающее по принципу, который мы описывали: сервер присылает статику и базовый HTML-шаблон, а дальше генерация контента происходит с помощью JavaScript в браузере пользователя.

Это самый простой вид SPA в разработке. Но при этом, они практически не индексируются поисковыми системами, и могут «есть» много ресурсов устройства пользователя.

CSR SPA подходят для внутренних сервисов компании, например CRM-систем, потому что таким сервисам не нужно SEO.

2. SSR(Server Side Rendering) SPA

Суть SSR заключается в том, что на серверной части сайта тоже работает JavaScript, который при первом запросе генерирует готовый HTML-файл с наполнением и передаёт его на клиент. А дальше приложение работает, как обычное SPA.

Плюсом такого подхода является то, что сервер отдаёт уже готовую HTML страницу, которую может проиндексировать поисковик. Такой вид сайтов поддаётся SEO-оптимизации и в этом основное преимущество.

К минусам можно отнести то, что такие сайты сложнее в разработке, потому что требуют разработки ещё и серверной части. А также для таких сайтов нужен специальный хостинг с поддержкой JavaScript, либо выделенный сервер, где это можно настроить с нуля.

3. SSG (Server Side Generator) SPA

Этот вариант сильно отличается от предыдущих двух, потому что это не совсем SPA по идеологии.

Суть данного подхода заключается в том, что здесь контент не генерируется динамически с помощью JS. Вместо этого мы создаём обычные HTML-страницы, как и в Multi-Page application. Но что бы сайт работал, как SPA, с помощью JavaScript отменяем обычное поведение переходов между страницами: шлём AJAX запрос на сервер, получаем контент новой страницы, вставляем в нужное место на сайте, и выполняем переход на другую страницу с помощью JavaScript и Hisory API браузера.

Плюс данного подхода заключается в том, что любой сайт можно легко переделать под SPA. Не нужны специальные хостинги или знание фреймворков. Плюс — отличная SEO-оптимизация, ничем не отличающаяся от обычных сайтов.

Минус такого подхода в том, что здесь нет динамики. Контент генерируется в статических HTML-файлах, поэтому создать приложение, где много всяких состояний, фильтров и прочего с таким подходом не выйдет.

Как создавать SPA-сайты?

Об этом расскажем в следующей статье: рассмотрим JS-фреймворки, а также готовые решения на нативном JS.

Чтобы не пропустить новый материал — подписывайтесь на рассылку: раз в месяц мы собираем все материалы и отправляем одним письмом с краткой аннотацией.

Поделиться:

Хотите получать больше полезных материалов?

Оставьте свой e-mail в форме, чтобы подписаться на ежемесячную рассылку :)

Некорректный e-mail
Спасибо за подписку:)
Вы уже подписаны:)
Отправляя эту форму, вы соглашаетесь с нашей Политикой конфиденциальности