E-commerce каталог на Next.js с тысячами товаров
Интернет-магазин картриджей и канцелярии на Next.js. Каталог с тысячами SKU, фильтрация, поиск и SSR без тормозов.
Задача
Интернет-магазин картриджей и канцелярии на WordPress + WooCommerce. Каталог с 3000+ товаров грузился по 8-10 секунд, фильтрация перезагружала страницу, поиск по артикулу через MySQL выдавал что попало. B2B-клиенты уходили к конкурентам - не могли быстро найти нужный картридж по модели принтера.
Решение
Построил новый фронтенд на Next.js с App Router. Каталог через ISR (Incremental Static Regeneration) - страницы категорий генерируются статически и обновляются раз в час. Фильтрация на клиенте через React Server Components + Suspense - выбираешь модель принтера, тип, цвет, результаты обновляются без перезагрузки, URL меняется для шаринга. Поиск через отдельный эндпоинт с индексом по артикулам и моделям - debounce 200мс, результаты в dropdown. Для категорий с 500+ товарами - виртуальный скролл, рендерятся только видимые карточки.
Результат
Загрузка каталога - 400мс вместо 8-10 секунд. Клиент находит нужный картридж за 10-15 секунд вместо минуты. Каталог из 3000+ товаров работает без тормозов.
Похожие кейсы
Нужно решить похожую задачу?