Как оптимизировать nuxt js?

Question

[Сергей Бурдужа]

Добрый день.
Хочу перейти с wordpress на nuxt.
Закончил главную страницу сайта nuxt-bludelego.herokuapp.com
И она очень долго запускается на heroku. Я купил там премиум и все равно долго запускается.

Потом проверил на локалке и оказывается, что проблема в запросах api.
В качестве админки, я использую wordpress на первых порах.
И еще сайт мультиязычный, два языка.

У меня 4 store, home, solutions, tipo и options.
И на главной(index.vue), когда первый раз загружается страница, я заполняю массивы данными.

export default {
  async fetch({ store }) {
    try {
      if (store.getters['home/home'].length === 0) {
        await store.dispatch('home/fetchHome');
      }
      if (store.getters["solutions/getSolutions"].length === 0) {
        await store.dispatch('solutions/fetchSolutions');
      }
      if (store.getters["tipo/getTipo"].length === 0) {
        await store.dispatch('tipo/fetchTipo');
      }
      if (store.getters["portfolio/getPortfolio"].length === 0) {
        await store.dispatch('portfolio/fetchPortfolio');
      }
      if(store.getters["options/getOptions"].length === 0){
        await store.dispatch('options/fetchOptions');
      }
    } catch (e) {
      console.log(e, 'e no data')
    }
  },
  components: { HomeContacts, PortofolioSlider, Clients, ChiSiamo, Solutions, HomeIntro },
}

Вроде не так уж и много информации.
Раньше разработал сайт с недвижимостью на wordpress и использовал vue inline, там форма сложная была.
Там недвижиости было 200 квартир. И я загружал на страницу все сразу, каждый раз, когда страница грузилась и то быстрее работало.
А тут приходится долго ждать.

Заранее благодарен за подсказку.

Comments

[WapSter]

Ну куда вы лезите во фреймворк, если js не знаете? Во первых нафига в сторе информация которая понадобиться один раз, во вторых ты используешь await во множестве запросов которые ждут друг друга. Нафига если есть promise.all

[Сергей Бурдужа]

WapSter, Почему один раз?
У меня только дизайн главной страницы, может эта инфа будет использоваться и в другом месте.
А про promiseAll, можно по-подробнее?
Как я могу использовать в async await?

[WapSter]

Сергей Бурдужа, точно так же как и любой промис.

[Сергей Бурдужа]

WapSter, А вы сами знакомы с vuex? И как работает dispatch?

Просто тут я не могу просто вызвать promise, потому, что используется dispatch, который в свою очередь и работает с api.

Вы же видите, что в коде я проверяю, если в массиве в vuex что-то уже есть, то брать инфу оттуда, иначе забрать через api и положить в vuex.

Я не вижу решение этой задачи, где несколько if и promiseAll.

[Сергей Бурдужа]

WapSter,

Такой код не работает.

fetch({ store }) {
    const promise1 = new Promise((resolve, reject) => {
      if (store.getters['home/home'].length === 0) {
        resolve(store.dispatch('home/fetchHome'));
      }
    });
    const promise2 = new Promise((resolve, reject) => {
      if (store.getters["solutions/getSolutions"].length === 0) {
        resolve(store.dispatch('solutions/fetchSolutions'));
      }
    });
    const promise3 = new Promise((resolve, reject) => {
      if (store.getters["tipo/getTipo"].length === 0) {
        resolve(store.dispatch('tipo/fetchTipo'));
      }
    });
    const promise4 = new Promise((resolve, reject) => {
      if (store.getters["portfolio/getPortfolio"].length === 0) {
        resolve(store.dispatch('portfolio/fetchPortfolio'));
      }
    });
    const promise5 = new Promise((resolve, reject) => {
      if (store.getters["options/getOptions"].length === 0) {
        resolve(store.dispatch('options/fetchOptions'));
      }
    });
    Promise.all([promise1, promise2, promise3, promise4, promise5])
      .then((data) => console.log(data))
      .catch((error) => console.log(error));

[WapSter]

Сергей Бурдужа, я без понятия, что у вас в dispatch происходит, и что там может перезаписаться. Оптимизируйте код так, чтобы всё можно было забрать без условий или одним запросом, а то такое ощущение, что у вас бизнес логика на фронте крутиться. Разделите запросы на те, что нужны в серверном рендеренге

[WapSter]

Сергей Бурдужа, зачем ты в промис оборачивает, если тебе dispatch и так промис возвращает?

[Сергей Бурдужа]

WapSter, Вы мне сегодня целый день долбили мозг и так и не помогли, а только критикуете.
Я нашел в телеграме канал nuxt, где есть адекватные люди.
Спасибо, что подключились, но от вас толку 0.

Answer 1

[Сергей Бурдужа]

Нашел решение проблемы.
Правильно выше написали, что нужно promiseAll использовать.
И вот решение:

fetch({ store }) {
    const result = [];
    if (store.getters['home/home'].length === 0) {
      result.push(store.dispatch('home/fetchHome'));
    }
    if (store.getters["solutions/getSolutions"].length === 0) {
      result.push(store.dispatch('solutions/fetchSolutions'));
    }
    if (store.getters["tipo/getTipo"].length === 0) {
      result.push(store.dispatch('tipo/fetchTipo'));
    }
    if (store.getters["portfolio/getPortfolio"].length === 0) {
      result.push(store.dispatch('portfolio/fetchPortfolio'));
    }
    if (store.getters["options/getOptions"].length === 0) {
      result.push(store.dispatch('options/fetchOptions'));
    }

    return Promise.all(result)
      .then((data) => console.log(data))
      .catch((error) => console.log(error));
  },