Как работает SPA при открытии дополнительных вкладок в браузере?
Допустим, речь идет об e-commerce - я на таких сайтах часто открываю кучу вкладок.
ReactJs + flux
Если сайт - Single Page Application, то очевидно, это SPA будет грузиться на каждой вкладке отдельно. И, вероятно это будет потреблять значительно больше памяти, чем аналогичный сайт не SPA.
1. Верно?
Но это не главное. Меня больше волнует, что происходит с переменными, которые образуются в процессе работы SPA.
Конкретно: пользователь осуществляет поиск по характеристикам товаров в каталоге. Получает определенную поисковую выдачу. Эта выдача висит как json array в SPA. При переходе на страницу товара, SPA берет дополнительную уже полученную инфу из этого array, чтобы не обращаться лишний раз к бд и молниеносно срендерить страницу. Оттуда же берет товары, которые будут выведены как "похожие предложения".
2. Так вот, если товар открыть в новой вкладке, эта система ведь не сработает? Как тогда передать этот array?
SPA = Single page app. Другими словами - всё происходит на одной странице. Если вы открываете соседнюю вкладку, то да - нужно грузить все заново. Но по сути само приложение уже в кэше браузера и загрузить нужно только контент, который также может быть закеширован к этому моменту.
Посмотрите в сторону изоморфных приложений, когда реакт рендерится как на сервере, так и на клиненте. Причем на клиент уже приходит HTML с данными.
1. так кеш - это оочень ограниченное пространство - 4kb, если не ошибаюсь. Вероятно, вы имеете ввиду LocalStorage, верно?
2. Я, совсем недолго пытался вникнуть в этот "изоморфизм", но так и не понял, зачем он нужен, ведь преимущество реакта как раз и состоит в том, что он очень быстро на клиенте работает. Разве что, это может быть полезно для первоначальной загрузки приложения - где-то попадалась статья, в которой рассказывалось, как можно при первой загрузке передать клиенту html а все приложение тем временем в фоне подгрузить. Еще не успел попробовать. Ну еще, я так полагаю, рендер на сервере может быть полезен для безопасности, но этого я еще не успел коснуться. Можете высказаться по этому поводу? Или ссылку на статью дать, на эту тему. Можно на английском.
hbrmdc: неа, я имел ввиду механизм кеширования браузера. Конечно, он ограничен и его размер зависит от настроек (вот например для хрома: chrome://net-internals/#httpCache ), но я сильно сомневаюсь, что в настоящее время у кого кеш в браузере 4кб))) Это же просто место на вашем жестком диске, куда браузер сохраняет результаты часто используемых запросов.
Если правильно проектировать restAPI, то Вы можете использовать этот механизм посылая нужные заголовки ( not modified, например)
hbrmdc: суть в том, что есть виртуальный дом. На клиенте это дает быстроту при обновлении реального DOM. А на сервере это позволяет рендерить сайт точно так-же как и на клиенте.
Почему это круто?
Ну, во-первых: если Вы с сервера отдаете пустую страницу, что увидят поисковики? Использовать phantom для рендеринга на серваке? Очень кривое решение, используется, например, для ангуляра.
Во-вторых: пока ваше приложение не загрузилось, пользователь будет видеть белый экран, а если вы на сервере уже все отрендерите - пользователь уже сможет ознакомится с сайтом, пока ваше приложение грузится в фоне.
Каких-то хороших статей я пока не нашел (на англ.), а на русском - тем более. Может сам напишу в скорем). Если интересно, можете посмотреть как сделан react-starter-kit, который я использую, как основу. А насчет безопасности - все равно restAPI используется .. разницы особо никакой.
Простой
Средний
