Headless Shopify: Achieving Sub-400ms Edge Delivery on Next.js

The Cost of Slow Storefronts

In modern e-commerce, speed is not just a technical metric—it directly impacts your bottom line. Mobile customers expect instant interactions. Telemetry studies show that every 100ms of latency above 1 second can decrease overall conversion rates by up to 7%.

Standard Shopify themes, while convenient, are structurally limited. They are built on Liquid—Shopify’s proprietary templating engine—which renders pages on monolithic servers before sending them to users. Add in multiple third-party apps for marketing, tracking, and reviews, and you end up with heavy, slow pages that degrade the mobile shopping experience.

Our custom [Shopify engineering](/shopify-engineering) framework solves this by decoupling the customer-facing frontend from Shopify’s backend. This gives you complete creative freedom and enables incredibly fast page speeds.

The Headless E-Commerce Stack

A high-performance headless architecture splits responsibilities across two layers:

• Backend Engine (Shopify): Manages inventory, processes checkouts, calculates shipping rates, and stores customer accounts.
• Frontend Interface (Next.js): A globally-distributed storefront deployed to edge networks, built with React and optimized with TailwindCSS.

By separating these layers, your frontend handles the visual layout, while communicating with Shopify’s backend via the secure Shopify Storefront GraphQL API.

Architecting for Sub-400ms Speeds with Next.js App Router

To achieve sub-400ms loading speeds globally, we combine Next.js Server Components (RSC) with a hybrid caching strategy.

// Next.js Server Component fetching product data directly at build/request time
import { storefrontQuery } from '@/lib/shopify';

interface ProductPageProps {
  params: { slug: string };
}

export async function generateStaticParams() {
  const products = await storefrontQuery(`
    query GetProductsList {
      products(first: 100) {
        edges {
          node {
            handle
          }
        }
      }
    }
  `);
  
  return products.data.products.edges.map(({ node }: any) => ({
    slug: node.handle,
  }));
}

export default async function ProductPage({ params }: ProductPageProps) {
  const response = await storefrontQuery(`
    query GetProductDetails($handle: String!) {
      productByHandle(handle: $handle) {
        id
        title
        descriptionHtml
        priceRange {
          minVariantPrice { amount currencyCode }
        }
      }
    }
  `, { handle: params.slug });

  const product = response.data.productByHandle;
  if (!product) return <div>Product not found</div>;

  return (
    <article className="max-w-4xl mx-auto py-12 px-6">
      <h1 className="text-3xl font-bold">{product.title}</h1>
      <p className="text-xl mt-4">${product.priceRange.minVariantPrice.amount}</p>
      <div 
        className="mt-6 prose prose-invert"
        dangerouslySetInnerHTML={{ __html: product.descriptionHtml }} 
      />
    </article>
  );
}

Dynamic Incremental Static Regeneration

Using generateStaticParams, Next.js pre-renders product pages as static HTML during the build process. When a user requests a product, the edge network delivers the pre-rendered page instantly, keeping response times under 100ms.

To handle inventory changes, we implement Incremental Static Regeneration (ISR). By using Shopify Webhooks, whenever an inventory update or price change occurs, Shopify sends an automated POST request to a Next.js API endpoint, instantly revalidating only that specific product’s cache. This ensures customers always see accurate product details without needing a full site rebuild.

Flawless Visual Stability: Eliminating CLS

A common issue with modern websites is layout shifts—where images or dynamic blocks load slowly, causing page content to jump. This is tracked by Lighthouse as Cumulative Layout Shift (CLS).

To prevent this, our [headless Shopify storefronts](/shopify-engineering) enforce exact aspect ratio boxes for all product images. We use Next.js next/image to automatically generate modern WebP/AVIF formats, handle responsive sizing, and display solid color placeholders until the images load, keeping layouts perfectly stable.