Headless Commerce Replatform — 23-Country Rollout and +21% Mobile Conversion
Starting Point
23 country storefronts. One Magento 2 monolith. 8.2 second average LCP on 4G. A Black Friday incident in 2024 that took the platform down for 4 hours, costing an estimated $2.1M in lost revenue.
The client's engineering team had tried to tune Magento's performance for two years. They reached the ceiling of what was achievable without a fundamental architecture change.
Why Headless
The decision to go headless was driven by three constraints:
Mobile-first markets — 68% of their revenue came from mobile, and 40% of that from Southeast Asia and Latin America where 4G is dominant. Server-rendered Magento pages simply cannot hit sub-2s LCP on these connections.
Localisation complexity — 23 countries meant 23 currency configurations, multiple payment providers per region, and country-specific product catalogues that were manually maintained in Magento's admin.
Team velocity — the front-end team was blocked on Magento's templating system. Feature releases took 3–4 weeks. The business needed weekly cadence.
Architecture
Frontend — Next.js + Vercel
We chose Next.js 14 with App Router for the storefront. Key decisions:
- Incremental Static Regeneration (ISR) for product pages — revalidated every 5 minutes. This eliminated the latency of server-rendering product pages on every request while keeping inventory and pricing fresh.
- Edge Middleware for geo-routing — a single Next.js codebase serves all 23 markets. Vercel Edge Middleware reads the
CF-IPCountryheader and rewrites to the correct locale route. - React Server Components for the header, footer, and product grid — reducing client-side JavaScript by 62KB.
Commerce Layer — Commercetools
We migrated from Magento's product catalogue to Commercetools over 8 weeks. The migration included 340,000 SKUs, 23 price books, and localised product descriptions in 11 languages.
Commercetools' project-level configuration allowed us to model each country as a separate "store" with its own pricing, available payment methods, and catalogue visibility rules — without maintaining 23 separate Magento installations.
Search — Algolia
Product search moved from Magento's MySQL-backed search to Algolia InstantSearch. A nightly sync job (Node.js Lambda) re-indexes the full catalogue; real-time events update individual product records on inventory or price change.
Result: search latency dropped from 480ms to 28ms P99.
Payments — Stripe + Local PSPs
Each country market uses a primary payment method:
- US/UK/EU: Stripe with regional acquiring
- Brazil: Stripe + Pix (instant payment)
- Indonesia/Malaysia: Midtrans
- Mexico: OXXO cash voucher via Conekta
We built a payment provider abstraction layer in TypeScript that the checkout flow calls with a standard interface — adding a new PSP is a 4-hour task, not a 3-week integration.
Migration Strategy
We ran both storefronts in parallel for 6 weeks. Traffic was split:
- Weeks 1–2: 5% Next.js / 95% Magento
- Weeks 3–4: 20% / 80%
- Weeks 5–6: 50% / 50%
- Week 7: 100% Next.js, Magento kept as read-only fallback for 2 weeks
At each stage, we compared conversion rates, cart abandonment, and error rates. The incremental ramp gave the QA team time to find market-specific bugs (one memorable bug: the Indonesian Rupiah formatter was displaying prices with a comma instead of a period as the thousands separator).
Results
+21% mobile conversion across all 23 markets in the 90 days post-launch.
−1.8s LCP improvement (from 4.4s to 2.6s median on 4G) — verified by Lighthouse running against real-device profiles.
Zero downtime during the 14-week migration. The Magento monolith remained the system of record until traffic was fully migrated.
14 weeks from kick-off to full production deployment across all 23 markets — the client's previous estimate for a similar replatform was 18 months.
62KB reduction in client-side JavaScript bundle — RSC moved significant rendering work to the server.