Melon Commerce Improves TPS by 6x Using Next.js Full Route Cache

The Melon Commerce team identified lower-than-expected TPS during load testing prior to launching a new service and optimized server resources by applying Next.js's Full Route Cache. Considering the e-commerce characteristics of a small number of products and traffic concentrated on specific pages, they determined that caching server-rendered results for product listing and detail pages would be the most effective approach.

Caching Strategy and Implementation

The existing dynamic routing structure was changed to static routing based on ISR (Incremental Static Regeneration). To achieve this, the use of Dynamic Functions such as cookies and headers was removed, and authentication logic was migrated to a client-side AuthProvider. Additionally, generateStaticParams was utilized to handle multilingual paths and product ID paths as static paths, and cache validity periods (revalidate) were set, excluding parts requiring real-time updates such as inventory changes.

Performance Improvement Results

Load testing results before and after implementation showed that average TPS (Transaction Per Second) improved by approximately 6x, from 34 to 220. This led to reduced response times and lower CPU usage, with performance improvements of up to 10x confirmed under certain conditions. A 304 response caching bug in Next.js versions prior to 14.0.2 was resolved using a monkey patch.