Решил попробовать сделать подгрузку порции элементов по кнопке в next js. Нашел библиотеку useSWR, которая должна помочь решить мою задачу. Судя по логике SWR я передаю начальные значения элементов (Первые 3 штуки) в пропсе
siteList из родительского компонента. Эти значения передаю в swr -
fallbackData: siteList.
Номер страницы передаю в api из стейта
const [pageIndex, setPageIndex] = useState(1);
Далее получаю из SWR первые 3 значения (Это должны быть данные из fallbackData) и заношу в стейт sites
const [sites, setSites] = useState(data.data);
Отрисовываю значения пробежавшись мапом по
sites
Кнопка запускает функцию, которая увеличивает стейт с номером страницы на единицу, берет первые параметры из
sites и добавляет туда новые из swr, которые там обновились из-за изменения номера страницы
pageIndex.
Но при таком варианте при загрузке выставлялись первые данные fallbackData, а далее по клику подгрузить еще swr загружал те же первые три элемента заново и отрисовывал.
Тогда я решил изменить начальную страницу на 2.
const [pageIndex, setPageIndex] = useState(2);
Теперь первым делом информацию swr брал из
fallbackData: siteList, а уже при клике по кнопке брал с апи вторую страницу и потом третью и тд.
Казалось, что проблема решена, но возникла совершенно странная проблема. Если я зайду на страницу и загружу элементы, а потом перейду на другой роутер и вернусь обратно на тот же роутер по , то swr проигнорирует
fallbackData: siteList и сразу начнет загружать с api со второй страницы и далее.
