Как передать данные с бэкенда в vuex при первом рендере?

Question

[LazarusNucleros]

Приветствую всех.

Есть сайт на Wordpress с Woocommerce, а также самописным плагином, реализующим дополнительный функционал.

Фронт планирую делать с помощью Vue (Vue, Vuex)

Сайт не является SPA.

Собственно возник вопрос - возможно ли как-то передать данные при первом рендеринге не в компоненты (с помощью пропсов), а напрямую в Vuex store? При этом, желательно бы, избежать дублирования данных.

Или же стоит отказаться от многостраничного приложения на Vue и реализовывать SSR с помощью NuxtJs? Но как его заставить работать, если на хостинге есть только php ?

Заранее благодарю за ответы.

P.S - я в этом деле новичок, плиз не кидайте тапками если несу ахинею. Я не специально :(

Comments

[LazarusNucleros]

Я представлял это примерно следующим образом

При открытии страницы категории бэком в определенное место страницы вставляется, незнаю, JSON-сериализованный массив со всеми данными, которые в хуке created корневого экземпляра пропихивались мутациями в стор. А все компоненты страницы уже работают со стором.

Но, мне кажется, это не самое красивое решение.
И да, варианта сменить хостинг, увы, нет - заказчик настаивает именно на этом хостинге и отказывается переезжать куда либо.

Все эти "решения" я выдумываю только потому, что не имею возможности построить полноценное SPA с SSR, а без SSR не будет и нормальной SEO, которая крайне важна для моего коиента.

[Константин Ишеков]

Зачем JSONить?)
1 вариант это в компоненте запросить Аяксом. Это хорошо тем, что у вас меньше будет запросов при отрисовки страницы. А Аяксом вызовите, когда вам будет нужно.
2 вариант сразу передать в компонент все ваши заджейсоненые данные, и пользоваться ими из props

<new-component :data="заджейсоненые ваши данные"></new-component>

Answer 1

[Андрей]

Ну, хостинг по любому придется менять и арендовать VPS.
Вопрос действительно не до конца понятен. Если используете Vue, то можно у Vue Router вызывать метод beforeEach и там вызывать нужные методы стора, которые будут сохранять данные в него (с условием, что этих данных нет, чтобы не нагружать бэкенд).

С nuxt это немного сложнее, там придется сделать middleware. Подробнее можете прочесть в документации.

Что конкретно использовать - зависит от задачи. Конечно, для интернет-магазина нужен SSR, если нужен трафик не только из гугла (да и, как показывает практика, гугл тоже лучше работает с SSR).