Как восстановить прежнее состояние при возврате к предыдущей странице (при использовании кнопки «Назад» в браузере) в NextJS?Или вообще, как вы восстанавливаете состояние при перемещении между страницами назад и вперед, используя кнопки браузера «назад» и «вперед»?
У меня есть проект, в котором я показываю множество игровых кадров в сетке («игровые выстрелы» - это нечтокак булавки Pinterest).Чтобы при получении данных от Sanity не было большого времени ожидания, я не получаю их все сразу, а затем сохраняю в this.props, но небольшими партиями, и поэтому они хранятся в this.state.
Это моя ситуация:
- Использование загружает
/game страницу - Страница получает 30 миниатюр из базы данных Sanity, переводит их в состояние как
this.state.gameshots и отображает их - Пользователь нажимает на миниатюру, и URL-адрес изменяется на
/game?gameshotIndex=14 (кстати, это реальный URL-адрес, но в строке URL-адреса указывается /gameshot/d6fg8a456g) - КогдаURL-адрес изменяется, отображается модальное окно с постом с игрой:
this.props.url.query.gameshotIndex && <Modal> ... </Modal> - Пользователь нажимает на ссылку тега внутри модального окна и переходит к
/tag/d65g4d56gff4g6jfg - Пользователь щелкает спиной браузераи выдает ошибку, потому что состояние на
/game потеряно и поэтому на странице нет this.state.gameshots, необходимого для отображения модального режима.Если бы они были загружены сразу и сохранены в this.props.gameshots, это сработало бы - но тогда вам пришлось бы загружать все игровых выстрелов сразу, даже если их было 100000000 - что означает огромный TTFB и медленную страницузагрузка.
Итак, мой вопрос: как вы можете перемещаться по страницам в браузере с помощью кнопок «назад» и «вперед», не теряя состояния?