--- title: "Addressing Unique Challenges with Next.js in E-commerce" description: "A summary of two major challenges our Next.js e-commerce site faced during a high-traffic Black Friday: ISR pages serving stale cache and displaying inaccurate inventory, and the corresponding solutions using Cloudflare Image Loader and client-side rendering." canonical_url: "https://blog.markkulab.net/en/post/nextjs-performance-issues-in-e-commerce" author: "Mark Ku" author_url: "https://blog.markkulab.net/en/author/mark-ku" site: "Mark Ku's Tech Notes" date_published: "2024-10-07 20:01:01 +0800" category: "Frontend" tags: ["nextjs", "react", "isr", "cloudflare", "ecommerce", "performance", "image", "frontend"] language: "en" license: "CC BY 4.0" license_url: "https://creativecommons.org/licenses/by/4.0/" attribution: "when reusing or quoting, credit the author and link back to the original" --- # Addressing Unique Challenges with Next.js in E-commerce ## Background Two years ago, the previous general manager had just retired. In the past, he had acted as a gatekeeper for the Taiwan IT department, which meant we could prioritize requirements. But by the time I joined, that gatekeeper was gone. Every request became urgent and rushed. The system had just gone live and was riddled with problems, and a group of people had already left. I walked into the company right in the middle of this chaos. When I first joined, the Next.js site had just gone live. It was using the Page Router, and we kept serving stale pages. I had only been with the company for about a month when I had to listen to a user from the US complain for an hour about the unstable e-commerce system. I wasn't very familiar with Next.js at the time, and the US holiday shopping season was just about to kick off. Here's a summary of the two major problems we solved back then. ## Problem 1: Incrementally Static Regeneration (ISR) pages kept serving stale content; even after the `revalidate` time expired, visiting the page again did not trigger a re-render. During the Black Friday sales period, our daily page traffic was high (over 20,000 visits). We noticed that after being deployed for a while, our Docker containers would grow from 2GB to 8GB. After some analysis, we discovered that the original image files uploaded by our users were very large and uncompressed, some up to 10MB. My theory was that because Node.js is single-threaded and relies on the event loop to schedule tasks, Next.js was trying to process images while also rendering pages. This image processing was creating a major performance bottleneck. ### Solution During the investigation, I discovered that Next.js has a built-in Image Loader designed to optimize images by serving different versions for different resolutions. However, image processing is I/O-intensive. While this might not be a problem for a low-traffic site, it becomes a significant performance bottleneck under heavy load. I then discovered that we had a Cloudflare Enterprise plan. So, I offloaded the image optimization task to the [Cloudflare Image API](https://blog.markkulab.net/custom-nextjs-image-loader-with-cloudflare/), which finally solved our site's performance problems. ## Problem 2: Inaccurate inventory on ISR pages To serve content to users quickly, we adopted Incremental Static Regeneration (ISR). However, during the peak sales season, we often ran into issues with items selling out. The product and detail pages would show that an item was in stock, but when a user tried to add it to their cart, they would get an "insufficient stock" error. ### Short-term Solution - Since I couldn't find a fundamental solution at the time, I wrote a "rebuild page" API. It could be triggered by adding `?forceUpdate=true` to the URL. I asked the back-end engineers to call this API whenever product information was updated. ``` import { LogLevel } from '@/lib/log/const-logging'; import { serverSideLog } from '@/lib/log/server-side-log'; import type { NextApiRequest, NextApiResponse } from 'next'; export default async function rebuild(req: NextApiRequest, res: NextApiResponse) { const secret = req.headers.$secret || req.query.secret; // req.headers.$secret => backoffice const refreshUrl: string = req?.query?.page?.toString()?.startsWith('/') ? req.query.page?.toString() : `/${req.query.page?.toString()}`; const serverUrl = req.headers?.host; const result: IReBuildResponse = { revalidated: true }; const param = { revalidatedHost: serverUrl }; if (secret && secret === $projects.secret) { try { serverSideLog( `[RebuildPage][Manual]Server rebuild is success! (${refreshUrl})`, LogLevel.Information, param ); await res.revalidate(refreshUrl); return res.json(result); } catch (err) { serverSideLog(`[RebuildPage][Manual]Trigger rebuild is fail!(${refreshUrl})`, LogLevel.Error, param); return res.status(500).json({ message: JSON.stringify(err) }); } } return res.status(503).json({ message: `Invalid token: ${$projects.secret}, ${secret}` }); } ``` ### Long-term Solution After gaining a deeper understanding of the business domain, I realized that inventory information simply shouldn't be cached. Discovering an item is out of stock only when adding it to the cart creates a poor user experience. However, if we didn't cache the page and used server-side rendering for every request, our large product catalog and high traffic would quickly lead to blocked requests and overloaded servers. So, we decided to keep the pages as ISR but fetch the inventory data on the client side. This would resolve the inconsistency between what was displayed and the actual stock. I asked the back-end engineers to write the real-time inventory data to Redis, and we would then fetch that data on the client side at render time. ``` export default function ProductCardsSection({ productData = [], className = '' }: Readonly) { const { data: stockData = {}, isLoading, isError, } = useGetStockByModelIDsQuery(productData.map((product) => product.modelId)); ... } ``` ![Get stock from client side](https://blog.markkulab.net/content/markku/posts/nextjs-performance-issues-in-e-commerce/images/get-stock-in-from-side.png) P.S. During this process, I also discovered that if you want to reduce the size of your Next.js container image, you can use the `standalone` output mode. It optimizes the build by packaging only the files and modules truly needed at runtime, which can reduce the bundle size and simplify deployment. P.S. Additionally, by specifying the lightweight `alpine-node` image in the Dockerfile, the size of the Next.js Docker container can be reduced by about 30%. --- ## About this article and its author Originally published on [Mark Ku's Tech Notes](https://blog.markkulab.net/en/post/nextjs-performance-issues-in-e-commerce) License: [CC BY 4.0](https://creativecommons.org/licenses/by/4.0/) — when reusing or quoting, credit the author and link back to the original ### About the author **[Mark Ku](https://blog.markkulab.net/en/author/mark-ku)** — Software Solution Provider - 10+ years senior software engineer, now an AI Builder - Focused on large-platform architecture — North-American e-commerce, AI SaaS subscription billing - Combining AI Agents and automation to build evolvable product foundations ### Free tools built by the author All of these are free to use: - [Free PDF Sign Tool](https://blog.markkulab.net/en/tools/pdf-sign): Online PDF sign tool — draw, type, or upload a signature, then drag, resize, and download. Everything runs in your browser; nothing is uploaded. - [VS Code Refactory](https://blog.markkulab.net/en/tools/refactory): Refactory is a VS Code refactoring extension: 34 actions plus a 37-rule code-smell inspection layer with a Code Health dashboard, across 18 languages, backed by 534 tests. It learns your repo's conventions: where interfaces live, where DI is registered, whether 'use client' belongs. It ranks files by git churn × complexity so you know what to fix first, and hands any smell to the Claude Code already on your machine. Free to use, and your source never leaves your computer. - [DB-Kit Database Manager](https://blog.markkulab.net/en/tools/db-kit): DB-Kit is a lightweight, cross-platform database manager built with Tauri + Rust + React. Manage MySQL, MariaDB, PostgreSQL, SQL Server, Oracle, SQLite, MongoDB, Redis, Kafka, Elasticsearch and RabbitMQ from one consistent interface: passwords encrypted in the OS keychain, SSH tunnels, full CRUD, a visual query builder, stacked multi-statement result sets, cross-connection data transfer and compare/sync, Excel / CSV import & export, visualized execution plans, ER diagrams, scheduled backups, SQL stress testing with p50–p99 latency percentiles, a 15-rule SQL review engine, Kafka message browsing with monitoring & alerts, a bilingual UI (Traditional Chinese / English), a built-in AI assistant (natural-language SQL, AI review and tuning advice) and the dbk CLI. Free and open source (MIT), with installers for Windows, macOS and Linux. - [VS Code Super Mermaid](https://blog.markkulab.net/en/tools/super-mermaid): Super Mermaid is a VS Code extension for beautiful Mermaid diagrams out of the box: auto-colored live preview, mouse pan & zoom, high-res PNG / SVG export, 21 templates and multiple themes. Free and open source (MIT). - [React Super Mermaid](https://blog.markkulab.net/en/tools/react-super-mermaid): react-super-mermaid is an open-source React component library: render beautiful Mermaid diagrams with a single , with built-in colorful / sketch themes, pan & zoom, in-diagram search, and high-res SVG / PNG export. Lightweight, SSR-safe, fully typed. Free and open source (MIT). - [Jira / Confluence Super Mermaid](https://blog.markkulab.net/en/tools/jira-super-mermaid): An Atlassian Forge app: write Mermaid syntax directly inside a Jira issue or a Confluence page and get flowcharts, sequence diagrams, state machines and Gantt charts. 11 diagram types, SVG / PNG export, light and dark themes, full CJK support. Runs on Atlassian: your diagrams live in your own site and the app calls no third-party service. Free, coming soon to the Atlassian Marketplace. - [Mermaid Live Preview](https://blog.markkulab.net/en/tools/mermaid-preview): Write Mermaid in your browser, see it render instantly, and share the whole diagram as a single link. No sign-up, nothing uploaded to a server, and mermaid.live share links work as-is. - [React Intl Phone Number](https://blog.markkulab.net/en/tools/react-intl-phone-number): react-intl-phone-number is an open-source React component: framework-agnostic and antd-free, with E.164 in/out, a searchable flag / country-code dropdown, configurable validation levels (strict / mobile-strict / loose), themeable CSS, and i18n — phone logic powered by google-libphonenumber. Lightweight and fully typed. Free and open source (MIT). - [Uptime Kuma Cluster](https://blog.markkulab.net/en/tools/uptime-kuma-cluster): Turn single-node Uptime Kuma into a highly available cluster: OpenResty + Lua smart load balancing, shared MariaDB state, health checks and automatic failover, plus cluster-management REST APIs. One Docker Compose command to start. Free and open source (MIT). - [Special Education](https://blog.markkulab.net/en/education): Learning materials crafted for special education students ### Daily podcasts - [Mark's Tech Insights — Daily AI News](https://blog.markkulab.net/en/category/tech-news): Daily curated AI and tech trends. Catch the latest developments via audio summaries — covering AI applications, software architecture, DevOps, and engineering practice. — RSS: https://blog.markkulab.net/feed.xml - [AI股市蝦聊](https://blog.markkulab.net/en/category/ai-stock-chat): Every trading day, an AI-analyzed take on the Taiwan stock market, delivered as a two-host conversation covering the session and the next-day outlook. — RSS: https://blog.markkulab.net/ai-stock-chat/feed.xml - [開源好物週報](https://blog.markkulab.net/en/category/open-source-weekly): A weekly two-host pick of free open-source tools surfaced from real Hacker News, GitHub, and Reddit buzz — what pain they solve and the fastest way to get started. — RSS: https://blog.markkulab.net/open-source-weekly/feed.xml ### Newsletter [Subscribe to the newsletter](https://blog.markkulab.net/en/subscribe) — Be the first to know about new posts. No spam, unsubscribe anytime.