Одностраничные (SPA) и многостраничные (MSA) сайты

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

Статья имеет теоретический характер hi

Определение

MSA (multi pages application) — многостраничное приложение или веб-сайт, в котором каждая отдельная страница предоставляет определенный функционал и все необходимое для его осуществления, куда входят свой собственный html, css, javascrpt. Как правило при переходе на другую страницу такого сайта данные загружается идентичные предыдущей странице, однако вся верстка в html передается с севера заново.

code4life.ru является MSA, здесь каждая страница имеет свой собственный html код, собственный css и javascript, на всех страницах css и javascript идентичен.

SPA (single page application) — одностраничное приложение или веб сайт, использующий в качестве основной оболочки один html код и подгружает дополнительные html, css, javascript файлы как правило посредством AJAX. Для реализации SPA используют известные фреймворки, напрмер Angular, React и прочие.

Примером SPA может служить панель управления на хостинге dsn.host, социальная сеть ВКонтакте

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

  • SPA не может получать данные из файлов клиента и не может их записывать
  • возможности SPA достаточно ограничены окружением браузера, в то время как native app доступны многие функции ОС
  • SPA будет работать практически везде где есть браузер с поддержкой JavaScript, а native app рассчитан только на конкретное устройство либо ОС (семейство ОС).

Достоинства и недостатки

Особенности MSA:

  • переход на другую страницу сопровождается полным обновлением данных
  • не всегда нужна поддержка javascript
  • html формирует сервер
  • большинство расчетов берет на себя сервер

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

Особенности SPA:

  • JavaScript фреймворки (MVC и MVVM)
  • расчеты на стороне клиента и как следствие более быстрая отзывчивость, причем некоторые функции SPA могут работать без связи с сервером
  • общение клиента с сервером как правило более объектное и как следствие меньше лишних данных отправляется в обоих направлениях, а это экономия трафика
  • html хранится в скриптах либо динамически подгружается с сервера при необходимости
  • значительно усложнённый front-end
  • при правильное организации SPA имеет REST архитектуру, так как SPA предоставляет возможность работать с пользователем и его состоянием только на стороне клиента и не вмешивая сюда сервер

Минусы MSA:

  • долгая загрузка каждой страницы по сравнению с SPA, так как каждая загрузка страницы ведет к ее полной загрузке hi
  • активная работа сервера, так как большая часть логики именно на нем
  • необходимо работать и на сервере и на клиенте, а значит и серверный язык программирования и клиентский

Но многие проблемы MSA не такие уж и проблемы, мы к ним уже привыкли pardon

Минусы SPA:

  • не будет работать в браузерах без поддержки JavaScript, эту проблему никак не решить
  • долгая первоначальная загрузка клиентом в связи с большим количеством javascript кода на стороне клиента (решается за счет изоморфного JavaScript)
  • проблемы SEO и с расшариванием в социальных сетях (решается за счет изоморфизма JavaScript, либо за счет сторонних сервисов, есть и другие методы)
  • так как на клиенте появляется много работы, то клиенту нужны вычислительные возможности
  • усложнение front-end. Кроме html и логики UI здесь еще и роутеры
  • так как у приложения одна точка входа, существует риск того, что одна ошибка может привести к нерабочему состоянию всего приложения
  • из-за динамической подгрузки (Ajax) при нестабильном соединении интернета возможен обрыв связи и неудачная загрузка контента, что может привести пользователи в недоумение и закрытию им сайта.

Некоторые проблемы SPA, такие как SEO и расшаривание в социальных сетях, решаются при помощи изоморфного javascript, который выполняется как на сервере так и на клиенте.

Поделиться:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*