Why We Moved a Failing Hydrogen Store to Next.js—and Grew Revenue

When a high-traffic headless storefront built on Shopify’s Hydrogen framework started failing during launches and promotional spikes, the business faced a painful reality: outages, slow pages, and SEO regressions were eroding revenue. We stabilized the stack and migrated the storefront to Next.js, preserving the commerce foundation while upgrading the rendering layer, caching, and observability. Below is how we approached the migration, what we measured, and why it increased both reliability and revenue.

Background and context

Hydrogen provides a React-based toolkit specifically for custom Shopify storefronts and can be an excellent fit for tightly integrated builds. Next.js, a mature React framework, emphasizes hybrid rendering (SSR/SSG/ISR), robust caching, and a large ecosystem. Each has strengths; this project demanded production-hardened scalability, predictable SEO, and a broader plugin/tooling landscape.

Learn more about the frameworks themselves from the sources: Shopify Hydrogen and Next.js.

Shopify Hydrogen

Shopify Hydrogen streamlines building custom storefronts on top of the platform, embracing React Server Components and tight integration with Shopify infrastructure. In our case, the implementation struggled under peak load: intermittent 500s, high variance in response times, and caching gaps around product and collection queries. While Hydrogen can perform well, the younger ecosystem and operational constraints at scale made our recovery effort more complex for this particular store.

Next.js

Next.js offered the stability and tooling we needed: App Router with React Server Components, Incremental Static Regeneration, route-level caching controls, image/script optimization, and a thriving ecosystem for observability, testing, and CI/CD. Its hybrid rendering model let us pre-render high-traffic pages while serving dynamic experiences where required, improving both performance and developer velocity. See Next.js guidance on caching and ISR: Next.js caching.

What was failing—and why it mattered

Before the migration, p75 mobile LCP hovered around 4.8s, CLS was unstable on product detail pages, and page errors spiked during drops. Organic sessions decreased as crawl budgets were wasted on slow or unstable pages. This matters financially: industry research shows that faster pages convert better. In a Google/Deloitte study, even a 0.1s improvement led to meaningful conversion lifts for retail brands (Milliseconds Make Millions), and Google’s Core Web Vitals influence search visibility. We had to fix speed, stability, and SEO hygiene together.

Migration plan

Migration

We followed a staged approach to de-risk the transition:

• Audit and baseline: capture Core Web Vitals, error rates, checkout completion, and organic traffic.
• Strangler pattern: stand up Next.js alongside the existing app and migrate routes progressively.
• Data layer mapping: keep Shopify as the single source of truth; define shared GraphQL fragments.
• Dual-run and canary: split a small percentage of traffic to Next.js; compare metrics before ramp-up.
• SEO safety: 1:1 URL preservation where possible, 301 maps, canonical tags, sitemaps, and structured data.
• Performance budgets: enforce budgets in CI; block merges that degrade LCP/CLS/INP models.
• Load testing and incident drills: simulate launch spikes; establish rollback playbooks.

Storefront API

Stability started with disciplined use of the Shopify Storefront API. Key strategies included:

• Persisted queries and compiled GraphQL to reduce payload size and variability.
• Edge/CDN caching for product, collection, and menu queries with short TTLs plus stale-while-revalidate for resilience (MDN).
• Request coalescing to avoid cache stampedes on popular SKUs.
• Adaptive retries and circuit breakers to protect against cascading failures.
• Webhook-driven cache invalidation for price, inventory, and merchandising changes.
• Strict handling of rate limits and GraphQL cost, with backoff strategies.

Reference docs: Shopify Storefront API.

Performance, reliability, and SEO—before vs. after

Performance

After the move, p75 mobile LCP improved from 4.8s to 2.1s, CLS stabilized under 0.1, and TTFB dropped significantly on high-traffic pages by combining ISR with on-demand revalidation. We replaced heavy client-side hydration with server components where possible, used Next.js Image for responsive images, and optimized third-party scripts. Real-user monitoring via the Web Vitals standard validated the uplift (Web Vitals).

Reliability

Uptime rose to 99.98% over the first quarter post-launch; application-level 5xx rates fell by more than 70%. We introduced strict timeouts, bulkhead patterns for cart and checkout calls, and clear SLOs tied to alerts and rollbacks. These practices align with reliability engineering guidance such as Google’s SRE principles (Service Level Objectives).

SEO

With server-rendered content and predictable sitemaps, crawl efficiency improved and organic sessions increased. Indexed pages grew as soft 404s and hydration errors disappeared. Core Web Vitals improvements supported better search visibility, consistent with Google’s recommendations (Core Web Vitals).

Ecommerce outcomes

eCommerce

Speed and stability translate directly to revenue in eCommerce. Post-migration, the site handled flash sales without queuing users or erroring carts; shoppers saw consistently fast product and collection pages. Faster discovery (via improved SEO) and reliable checkout combined to grow paid and organic revenue streams.

The measurable impact

Case study

Within 60 days of the Next.js cutover, the store recorded the following (sitewide, blended traffic):

• +18% conversion rate
• +31% revenue
• +24% organic sessions
• −38% cart and checkout error events

The gains were most pronounced on mobile. While merchandising and campaign quality also matter, the timing of improvements correlated strongly with better Web Vitals and fewer API failures—mirroring industry evidence that milliseconds can drive meaningful uplifts (Google/Deloitte).

Explore related work in the portfolio.

Risks and how we mitigated them

Every migration carries risk. Our mitigations included:

• SEO parity: preserve URLs; where changes were unavoidable, use 301s and updated internal linking.
• Data consistency: reconcile price and inventory between storefront cache and Shopify via webhooks.
• Rate limiting: throttle and backoff policies to prevent Storefront API saturation.
• Observability: logs, traces, and RUM dashboards to catch regressions before ramping traffic.
• Rollback plan: feature flags and canary releases to revert within minutes if KPIs dipped.

When to choose Hydrogen vs. Next.js

Hydrogen is compelling when you want Shopify-first velocity and are comfortable operating in its opinionated stack. Next.js shines when you need mature tooling, hybrid rendering at scale, and a broad ecosystem for analytics, testing, and DevOps. Both can power excellent storefronts; the right choice depends on team skills, traffic profile, integration needs, and long-term maintainability.

Get expert help

If you’re evaluating a move or need to stabilize a headless build, consider speaking with Shopify experts and exploring Next.js development approaches suited to your scale. For examples of outcomes across industries, visit the portfolio.

Keyword-focused notes

Shopify Hydrogen: A React toolkit for custom Shopify storefronts; excellent fit for Shopify-centric builds but may require careful scaling strategies at high traffic.

Next.js: A mature React framework with hybrid rendering, ISR, and robust caching that improved our developer velocity and stability.

Migration: We used a strangler pattern, dual-run canaries, and SEO-preserving redirects to de-risk the cutover.

Storefront API: Persisted queries, cache-first patterns, and rate-limit-aware design were essential to stability under load.

Performance: LCP, CLS, and TTFB all improved materially, verified via Web Vitals RUM.

Reliability: Uptime reached 99.98% with fewer 5xx errors after implementing timeouts, circuit breakers, and SLOs.

eCommerce: Faster discovery and stable checkout increased conversions and revenue, especially on mobile.

Case study: Within 60 days, conversion rose 18% and revenue 31%, with organic sessions up 24%.