Как реализовать SSR без использования глобального хранилища (на примере Vue 3)?

Question

[Александр Силаев]

Доброго времени суток!
Для Vue 3 появилось мнение, что глобальное хранилище (типа Vuex) больше не нужно и его запросто можно заменить встроенными средствами самого Vue 3 (пример или пример).
Если я буду придерживаться этого мнения и строить свое приложение без единого глобального хранилища, то каким образом мне реализовать гидрацию данных на стороне клиента?

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

Без Vuex вообще не понятно как "прокинуть" данные на клиент. В голове только варианты, которые по факту повторяют то, что делает Vuex... только несколько иначе.

Следовательно вопрос: есть ли проверенные практики/паттерны, которые позволят реализовать полноценный SSR (с сохранением состояния от сервера до клиента) без глобального хранилища?

Answer 1

[Стефан]

А причем у вас Vuex и SSR? Vuex просто хранит состояние - нет Vuex нет состояния, вы ничего не прокидываете на клиент с сервера, клиент каждый раз ходит к вам за новой страничкой, и вы ему отдаете ее уже наполненную со всеми данными - это и есть SSR, к примеру у вас обычно Vue получает список товаров с сервера, как получит показывает карточки, с SSR вы отдаете страничку сразу с карточками готовыми.
По факту SSR нужен для SEO в большей части, так как я не знаю людей которые отрубают js в браузере

Если нужен SSR, то рекомендую не изобретать велосипед, а посмотреть в сторону Nuxt

Comments

[Александр Силаев]

Спасибо за рекомендацию, но Nuxt меня не интересует (+ он использует Vuex).

А причем у вас Vuex и SSR?

Возможно мне не удалось донести основной вопрос, постараюсь пояснить на примере.
У меня есть страничка с корзиной и продуктами. Состав корзины и сами продукты я получаю из апи.
Получается, при SSR у меня на сервере рендерится страничка (уходят запросы к апи, строится html) и после уходит на клиент. Далее, на клиенте должна произойти гидрация приложения. Но на клиенте нет данных, которые были получены на сервере и из-за этого на апи уходят повторные запросы. С помощью Vuex я могу решить это проблему: на сервере внедрять стейт хранилища в страницу, а на клиенте подтягивать сохраненный стейт. Т.о. запросы к апи уйдут только один раз.
А как решить эту проблему без глобального хранилища?

[Стефан]

Александр Силаев, с чего это вдруг гидрация при SSR у вас происходит на клиенте? Гидрацию делает сервер, и отдает уже полностью готовый html.
Nuxt поставляется с Vuex, никто не заставляет вас им пользоваться.

[Александр Силаев]

Стефан, в официальной документации vue написано несколько иначе:

Гидратация относится к процессу на стороне клиента, в течение которого Vue берёт статический HTML, отправленный сервером, и превращает его в динамический DOM, который может реагировать на изменения данных на стороне клиента.

можете, пожалуйста, уточнить где я ошибаюсь?

[Стефан]

Александр Силаев, Могу, в том что вы переслали говорится по обычный сценарий, при обычном сценарии как раз таки у вас на клиенте все и наполняется, но вы пишите по SSR, Vue у вас это отдельное клиентское приложение, которое ходит на сервер за данными и все, в случае SSR, вы отдаете клиенту не пустой html с тегом body и скриптами которые потом все отрисуют, а сразу, все отрисовываете сами, на сервере, и отдаете готовый html.

Если кратко, то, Vue по дефолту, занимается всем на клиенте, но когда такое не возможно, (типо JS не работает), вступает в игру SSR.
Вы сами то знаете для чего вам SSR?

[Александр Силаев]

Стефан, в том, что я переслал, описывается как раз таки сценарий SSR: (далее по докам)

Поскольку сервер уже отобразил разметку, мы, очевидно, не хотели бы её выбрасывать и заново создавать все элементы DOM. Вместо этого мы хотим «гидрировать» статическую разметку и сделать её интерактивной.

Т.е. как Вы и описываете: сервер отдает не пустой html, а наполненный контентом. Только контент этот - статический, и приложение на клиенте не будет иметь состояния.

Если кратко, то, Vue по дефолту, занимается всем на клиенте, но когда такое не возможно, (типо JS не работает), вступает в игру SSR.

SSR, который реализован средствами vue (см. vue-server-renderer)

Вы сами то знаете для чего вам SSR?

Да, я прекрасно понимаю для чего мне нужен SSR. Так же, я вроде понимаю, как он работает. А у Вас такая уверенность есть? :)

[Стефан]

Александр Силаев, Хорошо, отвечу чуть по другому, зачем вам гидрировать на стороне клиента, если вы можете собрать готовый html на сервере и вернуть его?

[Стефан]

Александр Силаев, То что вы описываете с гидрацие данные на клиенте это не SSR, ваш vue-server-renderer, берет просто template готовый, и отдает его, типо не голый body, а с какой то разметкой, по факту он ничего не рендерит на стороне сервера.

[Александр Силаев]

Стефан,

зачем вам гидрировать на стороне клиента, если вы можете собрать готовый html на сервере и вернуть его?

для того, чтобы приложение на клиенте стало интерактивным без "перерендера" всего DOM
готовый html на сервере я соберу, но это будет только статика

ваш vue-server-renderer, берет просто template готовый, и отдает его, типо не голый body, а с какой то разметкой, по факту он ничего не рендерит на стороне сервера

отнюдь, как раз таки на сервере из (код для примера)

<div>
  <h3>Cart:</h3>
  <div>
    <div v-for="(item, idx) in items">
      {{ item.product.name }}
    </div>
  </div>
</div>

получится

<div><h3>Cart:</h3><div><div>Product 1</div><div>Product 2</div><div>Product 3</div></div></div>

что и пойдет на клиент. А дальше надо как-то оживить эту статику не делая доп. запросов к апи (данные то уже есть).

[Стефан]

Александр Силаев, Напишите пожалуйста пример того что вы можете получать с Api, когда собрали страничку

[Александр Силаев]

Стефан, не совсем понял Ваш вопрос... постараюсь описать.

Можно считать, что у меня простейшее API, которое может только сохранять состав корзины и выдавать его. Страничка, на которой выводится список продуктов в корзине.
Соотв. я получаю состав корзины; формат, надеюсь, не имеет значения... например

{items: [{count: 3, product: "Product 1"}, {count: 1, product: "Product 2"}, {count: 4, product: "Product 3"}]}

Подобные данные я получаю на сервере и рендерю страницу. Далее, если не производить корректной гидрации, клиент посылает такой же запрос к API и получает ровно такие же данные. (мне же хочется избежать повторного запроса)