Термин «одностраничное приложение» (или SPA) обычно используется для описания приложений, которые были созданы для Интернета. Эти приложения доступны через веб-браузер, как и другие веб-сайты, но предлагают более динамичные взаимодействия, напоминающие родные мобильные и настольные приложения.

Самая заметная разница между обычным сайтом и SPA — это уменьшение количества обновлений страницы. У СПА более тяжелое использование AJAX — способ общения с серверными серверами без полного обновления страницы — для загрузки данных в наше приложение. В результате процесс рендеринга (построения) страниц происходит в основном на стороне клиента с помощью JavaScript.

SPA, Single Page Application, Одностраничное приложение

В то время как строительство SPA-приложений является модным и считается современной практикой развития, важно знать о его недостатках, в том числе:

  • Браузер делает большую часть тяжелого подъема, что означает, что производительность может быть проблемой — особенно на менее способных мобильных устройствах.
  • Сложность поисковой оптимизации (SEO), сложность предоставления вашего контента поисковым системам и сайтам социальных сетей, которые предоставляют предварительный просмотр ссылок.

Смягчение недостатков с помощью рендеринга на стороне сервера

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

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

Популярные JavaScript-фреймворки и библиотеки для создания SPA

Чем больше интерактивности происходит на стороне клиента, тем больше кода JavaScript требуется для того, чтобы эти интерактивные элементы функционировали хорошо. И чем больше написано кода, тем важнее иметь чистую и хорошо продуманную кодовую базу. И это именно та проблема, которую решают фреймворки JavaScript, — каждый с собственным подходом.

Существует множество открытых исходных JavaScript-фреймворков, которые помогают создавать SPA-приложения, такие как:

Список может продолжаться и продолжаться, но давайте немного погрузимся в первые два здесь: «Angular и React».