Ecommerce Performance Pressures
Building a high-performing ecommerce site is genuinely difficult. Google's page experience update made performance a ranking factor, and Amazon found that just 100 milliseconds of extra load time cost them 1% in sales. Yet according to the Web Almanac, ecommerce sites still struggle to achieve good performance.
The median ecommerce homepage on mobile makes 101 requests. These pages are asset heavy—video and images are both the most requested resource types and the largest contributors to page weight. Personalization adds another layer of complexity, with recommended products, cart state, user information, and location-based content all requiring dynamic data.
Many commerce platforms offer pre-built templates to get started quickly, but these often lack the rigor needed to scale. Shopify's store themes, for example, only require a minimum average Lighthouse performance score of 60 across product, collection, and home pages for both desktop and mobile. Large retailers like Under Armour, Walmart, Target, and Nike have turned to Next.js for better results.
From Version 1 to Version 2
Next.js Commerce was first announced at Next.js Conf 2020 alongside Next.js 10. At the time, features like next/image with automatic image optimization, plus per-page static and dynamic rendering, provided the ingredients for a better ecommerce experience. Combined with the industry shift toward headless commerce, that first version delivered excellent Core Web Vitals, SEO optimizations, Incremental Static Regeneration, and link prefetching.
But highly dynamic ecommerce sites still had room for improvement. The challenges of cart state, search results, product availability, and recommendations required more granular control over static and dynamic parts of an application. The App Router in Next.js introduces exactly that deeper level of control.
Dynamic Storefronts at Static Speed
By leveraging the App Router's latest features and Vercel's Frontend Cloud, Next.js Commerce 2.0 demonstrates that dynamic storefronts can perform at the level of statically cached pages. This is made possible by the new caching architecture in the App Router and the Vercel Data Cache.
Several App Router features are key to this approach:
Layouts and Pages
The new file-name routing convention includes layouts and pages, which allows you to create and share site-wide components like headers and footers. For ecommerce specifically, this makes it possible to have a cart accessible from anywhere on the site—resulting in a much snappier experience.
React Server Components, Streaming, and Suspense
React Server Components (RSCs) allow as much work as possible to happen on the server before returning fully rendered UI. This means a leaner client-side JavaScript bundle, fewer client-side requests, no layout shift, no loading spinners, and faster time to interactive.
Streaming with Suspense enables portions of the UI to be returned as they're ready, rather than waiting for the entire page. The site is no longer as slow as its slowest backend—content above the fold appears immediately while sections below the fold stream in later. In Next.js Commerce, the layout, page, header, and search sort filters render on the server for initial page load, while the cart, search categories, products, and footer each load independently when ready.
Data Fetching and Caching
The biggest mental model shift is to stop thinking about which pages should be static or dynamic, and instead think about what data is static or dynamic. Moving that decision to data fetching gives you more control over when and where to serve static or dynamic content. Revalidation moves to individual data fetches as well.
Next.js Commerce uses Shopify's Storefront API, which is GraphQL-based. Since GraphQL expects all requests to be POST requests, the implementation mimics Next.js's built-in behavior of caching all calls by default, except for mutations.
The result is a storefront that feels static but is completely dynamic, with a fresh design to match.
