Как работают ссылки без решетки # в SPA приложениях?

Question

[vasIvas]

Когда у spa приложений ссылки в адресной строке содержат решетку, то это не красиво.
Есть вариант с history, но я не могу понять, как они работают. То есть я ввел ссылку с решеткой,
она раз и исчезла и ссылка стала красивой. Но если её скопировать, то она уже будет не рабочей,
ведь решетки в ней нет. И получается, что либо я что-то не понимаю и именно это и прошу объяснить на словах, либо тоже объясните на словах почему так.

Answer 1

[_ _]

Обсуждалось кучу раз уже - настройте свой веб-сервер, чтобы он на любой запрос отдавал index.html

Когда вы используете ссылку вида domain.org#/your-path, то сам веб-сервер, что бы там после # ни было, отправляет браузеру index.html, потому что для него это запрос к / (хэш существует только в браузере, на сервер не отсылается)

Когда вы используете ссылку domain.org/your-path, веб сервер пытается найти данные, соотв. этому your-path, которых 99% нет, и отдает вам 404.

Вы настраиваете сервер отдавать этот самый index.html в ответ на любой запрос.
В этом случае всегда загружается один и тот же index.html, который стартует ваше SPA, которое уже на основании window.location разбирается, что ему дальше делать.

Comments

[vasIvas]

В этом случае всегда загружается один и тот же index.html, который стартует ваше SPA

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

Answer 2

[Stalker_RED]

Если она стала неработающей - это кривое SPA.
Посмотрите на https://music.yandex.ru - всё красиво и все ссылочки работают.
Читайте доки по history api и смотрте примеры реализации.

Comments

[vasIvas]

Посоветовали роутер director, у которого есть параметр history. Вот я создал маршруты и выставил значение в true для html5history.
На следующем шаге я пишу domain.com/some и получаю 404. Затем пишу domain.com#/some, путь отрабатывает и приводит ссылку к виду domain.com/some. Но потом происходит то, что я написал в вопросе. Вы случаем не работали с этим роутором?
Или возможно что-то я не так делаю и Вы знаете что именно?

[Stalker_RED]

vasIvas: В каком смысле "не работает"? Нет, я не работал с этим роутером.

Answer 3

[Александр Таратин]

Но если её скопировать, то она уже будет не рабочей,
ведь решетки в ней нет.

Нужно отрендерить страницу на сервере.

Comments

[vasIvas]

А можете разницу объяснить, чтобы я уловил сому суть?

[Александр Таратин]

vasIvas: Все что напишу мое глубокое имхо.

Любое приложение должно работать хотя бы в ограниченном режиме без js вообще (ну или хотя бы первичная загрузка страницы) и тем более без history api.
History Api и прочие модные фиговины должны включаться только когда доступны и способствовать улучшению юзабилити и ускорению загрузки. Но без них приложение не должно становиться неработоспособным.

То есть на бекенде нужно реализовать два вью слоя.
Один классический - рендерим страницу и отдаем её на клиент целиком.
Второй рендерит данные (например в json) который грузиться через js и используется для частичного обновления страницы.

Получается что при заходе на адрес в первый раз мы грузим классический вью. А дальше если доступен history используем второй.

Определить какой из вью нужно отдавать клиенту можно через посыл доп заголовков, на этом принципе например работает pjax.
https://github.com/defunkt/jquery-pjax (подобных плагинов куча, гуглите)

[Stalker_RED]

Александр Таратин: Даже обычный ajax по умолчанию добавляет заголовок HTTP_X_REQUESTED_WITH