Как ускорить отображение элементов с запроса?

Question

[Max_AST]

Всем привет. Я новичок в React JS. В общем проблема заключается в том, что при загрузке страницы, товары с бэкенда появляются очень долго. Так выглядит мой запрос:

const [cards, setCards] = useState([])

interface CardsData {
card: ICard[];
}

useEffect(() => {
fetchCards();
}, [])

async function fetchCards() {
try {
const response = await axios.get(
`localhost:8080/backend/products.php`,
{
responseType: 'json',
headers: {
'Content-Type': 'application/json',
},
}
);
const cardsData = response.data;
setCards(cardsData || []);
} catch (e) {
alert(e);
}
}

Как оптимизировать код, чтобы загрузка проходила как на adidas или ozon сайтах? Возможно ли сделать так, чтобы информация подгружалась на карточки товаров поверх элементов карточек или как то ускорить запрос?

Comments

[Александр]

Что говорит вкладка network в DevTools?

[Модератор]

Фрагменты кода надо размещать в виде текста и оборачивать тэгом code для корректного отображения. Удобно делать кнопкой </>
Это обязательно, см.п.3.8 Регламента.
Сюда же относится traceback, ввод и вывод в консоли и другая структурированная текстовая инфа.

Answer 1

[Антон Иванов]

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