Как правильно организовать выборку данных из сервера в Nuxt, Vue?
Добрый день, подскажите как правильно сделать, при переходе на страницу магазина у меня есть 5 компонентов, данные магазина(название, обложка, лого) , последние новости, фотоотчеты(тоже последние 6), баннеры (последние 15)
на внутренних страницах, помимо содержимого будут эти же компоненты, может быть где-то не будет компонента баннеров
например главная страница магазина:
- компонент данные магазина: лого, название
- компонент последние новости
- компонент поаледние фото
- компонент последние баннеры
например страница новостей магазина:
- компонент данные магазина: лого, название
- компонент последние новости
например страница товаров магазина:
- компонент данные магазина: лого, название
- компонент последние новости
- компонент последние баннеры
Как правильно стучаться на сервер из каждого компонента и вытаскивать свои данные или же на странице вытаскивать все данные и передавать в компоненты?
Скорее всего вам будет проще понять это самому, потому как из вопроса не совсем понятно как работают ваши компоненты. Вот некоторые варианты:
1. Контекст страницы никак не связан с компонентами. Тогда в каждом компоненте загружаем данные по необходимости/ по нужности отображения, дабы минимизировать трафик для пользователя и запросы к серверу.
2. Контекст страницы частично связан с компонентами. Тут 2 варианта:
а) У вас превью элемента на какую либо категорию, страница загружает Категорию и имеет данные для заполнения превью, при переходе к Элементу, он уже сам себя грузит. Получается что мы загрузим всю страницу для навигации, а большая информация уже будет загружаться по запросу. Минус небольшие задержки при переходе к большим данным.
б) Загружать всё сразу и передавать в компоненты. Минус при таком подходе долгая первоначальная загрузка и факт того, что данные, которые были загружены пользователь возможно не увидит, а трафик и время потрачены.
Лого и название магазина загрузите 1 раз и закэшируйте, впрочем nuxt и браузер по идее за вас сами это сделают.
