History API и HASH-навигация на Ajax-сайтах

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

Непосредственно сама загрузка через AJAX отдельных блоков на странице (или даже всего содержания страницы) не вызывает смены адреса в браузере. Минус такого поведения в том, что пользователь не может работать с историей просмотров — кнопка «назад» работает не как ожидается (не происходит «отката» последней AJAX-загрузки, а осуществляется переход на страницу, которая была просмотрена до текущей и до всех AJAX-запросов), а URL в соответствующей строке браузера не коррелирует с текущим содержанием страницы.

В современных браузерах, который поддерживают спецификацию HTML5, для устранения этого нежелательного поведения есть методы History API. History API — это набор функций для работы с историей браузера, который позволяет записывать в историю адреса страниц и перемещаться по этой самой истории. Функция window.history.pushState(data, title [, url]) — записывает в историю новый переход и отображаемый на странице адрес изменяется.

History API — замечательная штука, но в устаревших браузерах не работает. Тут на замену приходит навигация, построенная на location.hash («якорная» или hash-навигация). Этот тип навигации построен на базе передачи параметров в виде «якорей», например, при Ajax-переходе на страницы /contacts адресная строка будет выглядеть так: site.ru/#!/contacts

Оба метода, как правило, используют JavaScript-события, которые срабатывают при загрузке страницы и при переходах по AJAX-ссылкам и осуществляют работу с History API или обработку location.hash.

В библиотеках Turbolinks и Wiselinks такое поведение уже встроено в базовый функционал.

Cтатьи по теме:

Все технологии фронтенд-разработки: язык разметки HTML, таблицы стилей CSS и язык программирования JavaScript
Содержание и внешний вид каждой страницы сайта определяется HTML-кодом и содержанием таблицы стилей CSS, а поведение интерфейса — скриптами JavaScript.
Увеличиваем скорость работы сайта при помощи оптимизации JavaScript
Сайт может работать быстрее, если выполнены следующие рекомендации по оптимизации JS-кода. Если же этого не сделать, то сайт будет недостаточно быстро отображаться на стороне клиента.
Чек-лист проверки фронтенда
По данному списку можно проверить фронтенд сайта или веб-приложения для выявления и последующего исправления ошибок или недочётов.
Ajax-навигация Turboliks & Wiselinks
Увеличить отзывчивость интерфейса и снизить нагрузку на сервер можно при помощи Ajax-навигации: если не перезагружать страницу целиком, а обновлять только содержание или отдельные фрагменты, то скорость работы сайта или приложения существенно возрастёт.
Ленивая загрузка или загрузка по требованию на клиентской части
Бывает так, что некоторое содержание страницы нужно не всем или не всегда, но на генерацию этого материала или для его передачи тратится много ресурсов. В этом случае имеет смысл сделать загрузку «ленивой», то есть не генерировать и не загружать в браузер информацию до тех пор, пока она не понадобится.
Валидность и семантичность HTML
Валидность и семантичность HTML кода определяет качество сайта с точки зрения поисковых систем.
Адаптивный и отзывчивый дизайн
​Для обеспечения хорошего отображения сайтов на мобильных устройствах (планшетах и смартфонах) обычно создаётся отзывчивый или адаптивный дизайн. Суть подхода заключается в изменении размера и расположения блоков, коррекции размера шрифтов, а также в отключении не самых важных блоков в случае, если пользователь заходит на сайт с устройства с небольшим экраном.

Тематические технологии:

Язык программирования JavaScript
Библиотека React
Библиотека MobX
Библиотека MobX State Tree
Система сборки WebPack
Платформа NodeJS
Yarn
NPM