Next.js commerce in production: how to design caching, PPR, MedusaJS and Core Web Vitals
TL;DR - Quick summary
- Speed drives conversion: studies often cite ~20% conversion loss per extra second - Next.js targets sub-300 ms TTFB when tuned.
- PPR: ship a static shell immediately, stream cart and recommendations behind React Suspense.
- MedusaJS v2 + Next.js: headless without Shopify Plus-style ceilings.
- Budget: GMI Software pairs DDT with a fixed-price guarantee for agreed headless commerce scopes.
The problem: burning Google Ads budget on a blank screen
Performance Max spends tens of thousands. Shoppers tap an ad and wait four seconds for a PDP while the browser downloads a heavy JS SPA or legacy Magento bundle. They bounce - budget evaporates.
GMI Software (16+ years, 120+ European deliveries) rarely saves the day with incremental tweaks. Next.js SSR ships rendered HTML in milliseconds.
SPA vs Next.js App Router - why SEO cares
Two storefront models:
- Classic React SPA: empty HTML plus a large bundle - the phone downloads, parses, executes, then fetches prices. Outcome: slow on mid-tier devices and weaker SEO.
- Next.js App Router: the server renders, pulls ERP / API data and returns lightweight HTML. Outcome: faster LCP and greener Core Web Vitals in Lighthouse.
Three production patterns for Next.js commerce (GMI stack)
Patterns that survive Black Friday on AWS ECS or Vercel:
These patterns assume headless commerce with Medusa as the API core - the same stack we run for B2B and high-traffic B2C.
1. Partial prerendering and streaming
We do not block the product shell on personalised rails. Next.js ships static structure (media, copy, CTA) while Suspense streams “bought together” and cart state.
2. ISR with tagged revalidation
Hundreds of thousands of SKUs cannot rebuild on every request. ISR caches PDPs. When ERP prices change we call revalidateTag so only the touched page rebuilds instead of hammering the database on every ad click.
3. Headless with MedusaJS v2
Next.js is the presentation layer. MedusaJS (Node.js) powers APIs for carts, Stripe and rules. The same backend later feeds React Native - roughly 30-40% savings versus a separate mobile backend.
Our MedusaJS development teams pair MedusaJS v2 with Next.js storefronts and shared APIs for React Native apps.
Proven resilience: the SFD example
We stress these ideas in production. SFD (100,000+ downloads, 4.9★, Mobile Trends Awards 2025 nomination) shows the React stack under promo spikes.
Slow shops lose carts. Our DDT sprint (about three weeks of analysis and architecture) ends with a Next.js quote and fixed-price guarantee for the agreed scope. After paid milestones, you own the repository rights.
If storefront performance burns paid media budget, start with a review of frontend, cache and integrations. Explore headless e-commerce delivery
Frequently asked questions
- Is Next.js a good choice for production ecommerce?
- Yes, if the architecture separates stable content, dynamic data, personalization and checkout. Next.js provides App Router, Server Components, streaming, Cache Components and RUM integration, but commerce still needs a good cache model, BFF and backend integration.
- Do PPR and Cache Components replace ISR?
- Not in a simple one-for-one way. In the newer App Router model the decision is more granular: some UI can live in the static shell/cache, some can stream behind Suspense, and data can be invalidated by tags. For commerce teams, domain freshness matters more than the name of one technique.
- How should a Next.js store invalidate prices and stock?
- Safest is domain-based tagging: product, price-list, inventory, category and promotion. ERP/PIM/WMS webhooks should invalidate only the data affected by the change. Checkout and buyer-specific price should not be cached like public product description.
- Why pair Next.js with MedusaJS?
- Next.js is strong for storefront rendering, UX and performance, while MedusaJS gives a modular commerce core for products, cart, pricing, promotions, checkout, orders and workflows. That avoids recreating commerce logic in React state and keeps code ownership.
- How should ecommerce teams measure Core Web Vitals?
- Measure field data, not only Lighthouse. The key metrics are LCP, INP and CLS at the 75th percentile of visits, across mobile and desktop. In commerce, segment by page type: PDP, PLP, search, cart, checkout, account and buyer type.
- How long does a production Next.js commerce build take?
- After DDT, a typical headless storefront with integrations usually takes 3-6 months, while complex B2B commerce with price lists, ERP/PIM/WMS, approval flow and mobile can take longer. Fixed price comes after discovery, once cache, checkout and integration risks are known.
Content updated: July 10, 2026