Next.js e-commerce catalog with thousands of products
Online store for printer cartridges and office supplies on Next.js. Catalog with thousands of SKUs, filtering, search, and SSR without lag.
Challenge
An online store for printer cartridges and office supplies on WordPress + WooCommerce. Catalog with 3000+ products loaded in 8-10 seconds, filtering reloaded the page, article search via MySQL returned irrelevant results. B2B clients left for competitors - couldn't quickly find the right cartridge by printer model.
Technical details
Solution
I built a new frontend on Next.js with App Router. Catalog via ISR (Incremental Static Regeneration) - category pages are statically generated and revalidated hourly. Filtering client-side via React Server Components + Suspense - pick printer model, type, color, results update without reload, URL changes for sharing. Search through a dedicated endpoint indexed on article numbers and models - 200ms debounce, dropdown results. For categories with 500+ products - virtual scroll, only visible cards are rendered.
Result
Catalog loads in 400ms instead of 8-10 seconds. Clients find the right cartridge in 10-15 seconds instead of a minute. A catalog of 3000+ products runs without lag.