Одностраничные приложения (Single page application) — это сайты, которые работают без перезагрузки страниц. Работают на JavaScript, для навигации используют встроенный роутинг и имеют одну точку выхода в виде HTML-файла, либо же подгружают страницы динамически с сервера, используя технологию AJAX.
Практически все современные сервисы, с которыми мы взаимодействуем каждый день (Facebook, Instagram, Gmail, YouTube, блог, на котором вы сейчас находитесь) — это SPA-приложения.
В чём преимущество SPA-сайтов?
Скорость
SPA в разы быстрее обычных сайтов. Потому что большую часть данных с сервера получают при первой загрузке и при дальнейшем взаимодействии с сайтом происходит подгрузка только нужной информации с сервера с помощью JavaScript.
При стандартном же подходе (Multi-Page application) при каждом переходе пользователя на новый раздел — сайт выполняет полную перезагрузку и повторно запрашивает данные с сервера.
Плавное взаимодействие пользователя с сайтом
Помимо скорости, у SPA есть существенное преимущество — более плавное взаимодействие пользователя с сайтом. Пользователь практически не замечает переходов, переключаясь между разделами сайта.
Ещё один плюс SPA — возможность создавать необычные эффекты переходов между разделами: это вовлекает пользователя в изучение контента, и помогает удерживать внимание.
А ещё SPA могут заменить мобильное приложение, если недостаточно бюджета на разработку сайта и приложения одновременно.
Удобство в разработке и масштабировании
Если на сайте много динамического контента, который зависит от действий пользователя (например: интернет-магазин, где в зависимости от фильтра выводится нужный контент) — то с SPA реализовать подобный функционал гораздо проще.
Минусы SPA
SPA генерируют контент динамически в браузере с помощью JavaScript’а. Работает это следующим образом:
- Пользователь открывает SPA в браузере.
- Приложение посылает запрос на сервер.
- Сервер возвращает статические файлы, такие как: картинки, шрифты, JS и CSS файлы, а также пустой шаблон HTML-страницы с базовой разметкой, куда и будет рендериться SPA.
- JavaScript динамически генерирует HTML и вставляет его в шаблон, который получил с сервера.
И поскольку SPA получают с сервера пустой HTML-шаблон — поисковые системы не могут проиндексировать контент сайта. Из этого следует, что большинство SPA невозможно продвинуть по SEO. Есть несколько путей решения этой проблемы, о них расскажем ниже.
SPA дороже в разработке и поддержке, по сравнению с обычными сайтами. Но этот минус перекрывается плюсами, описанными выше.
Если вдруг случилось так, что у пользователя отключен JavaScript в браузере, то он увидит пустую страницу, потому что SPA без JavaScript’а не работают. Но, давайте будем честны, на дворе 2020 год и любой сайт в интернете не будет нормально работать без JavaScript’а.
Виды SPA
Можно выделить 3 основных вида одностраничных приложений:
1. CSR (Client Side Rendering) SPA
Обычное SPA, работающее по принципу, который мы описывали: сервер присылает статику и базовый HTML-шаблон, а дальше генерация контента происходит с помощью JavaScript в браузере пользователя.
Это самый простой вид SPA в разработке. Но при этом, они практически не индексируются поисковыми системами, и могут «есть» много ресурсов устройства пользователя.
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 браузера.
Минус такого подхода в том, что здесь нет динамики. Контент генерируется в статических HTML-файлах, поэтому создать приложение, где много всяких состояний, фильтров и прочего с таким подходом не выйдет.
Как создавать SPA-сайты?
Об этом расскажем в следующей статье: рассмотрим JS-фреймворки, а также готовые решения на нативном JS.
Чтобы не пропустить новый материал — подписывайтесь на рассылку: раз в месяц мы собираем все материалы и отправляем одним письмом с краткой аннотацией.