[Performance] Ultra-Fast Responses for Headless E-Commerce! Shopify API Caching Strategy using Upstash Redis

The Impact of "Page Load Speed" on Conversions in Headless E-Commerce

"Headless E-Commerce" leverages the Shopify admin panel as the backend while building a custom frontend using frameworks like Next.js. Driven by the need for overwhelming design freedom and optimized rendering performance, many D2C/e-commerce brands are adopting this architecture.

However, a naive implementation of headless e-commerce can lead to the following performance challenges:

1. Latency with Every API Call: If Next.js hits the Shopify GraphQL API every time a user opens a product detail page, the API connection time (typically 100ms to 400ms+) translates directly into a delay in rendering the screen for the user.
2. Errors Due to Rate Limiting: During traffic spikes, the Shopify API's "rate limit" can be exhausted, resulting in failures to retrieve product information or inventory counts, which causes the site to display errors.
3. Limitations of Serverless Caching: Vercel's in-memory cache is lost due to function instance restarts (cold starts) or scale-outs, making it impossible to maintain global data consistency.

To completely eliminate these performance issues, deploying Upstash Redis—an ultra-fast, global cache store—between the frontend (Next.js) and the Shopify API is extremely effective.

---

2. Before & After: Resolving the Challenges

Item	Direct Shopify API Calls (Before)	Upstash Redis Caching Layer (After)
Product Load Time	Average 250ms–500ms	Average 10ms–30ms (Sub-100ms achieved)
API Request Consumption	Consumes Shopify API for every request	Zero Shopify access on cache hit (avoids rate limits)
Inventory Accuracy	Overselling occurs due to stale cache	Accuracy maintained by setting short TTLs only for dynamic data like inventory
Page Display Delay (LCP)	Rendering is delayed by a beat	Data is rendered instantly, significantly reducing bounce rates

---

3. Concrete Implementation Example: Product Information Caching Logic in Next.js App Router

Here is an example of Next.js data fetching code that caches basic product information (images, title, description, etc.) in Redis for several hours to return ultra-fast responses.

import { Redis } from "@upstash/redis";

const redis = new Redis({
  url: process.env.UPSTASH_REDIS_REST_URL!,
  token: process.env.UPSTASH_REDIS_REST_TOKEN!,
});

export async function getShopifyProductWithCache(handle: string) {
  const cacheKey = `product:details:${handle}`;

  // 1. First, search for the cache in Upstash Redis
  const cachedProduct = await redis.get(cacheKey);
  if (cachedProduct) {
    console.log(`Cache hit for product: ${handle}`);
    return typeof cachedProduct === "string" ? JSON.parse(cachedProduct) : cachedProduct;
  }

  // 2. If there is no cache, hit the Shopify GraphQL API
  console.log(`Cache miss. Fetching from Shopify for product: ${handle}`);
  const shopifyResponse = await fetch(
    `https://${process.env.SHOPIFY_DOMAIN}/api/2024-01/graphql.json`,
    {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        "X-Shopify-Storefront-Access-Token": process.env.SHOPIFY_STOREFRONT_ACCESS_TOKEN!,
      },
      body: JSON.stringify({
        query: `
          query getProduct($handle: String!) {
            product(handle: $handle) {
              id
              title
              description
              images(first: 5) {
                edges {
                  node {
                    url
                  }
                }
              }
            }
          }
        `,
        variables: { handle },
      }),
    }
  );

  const { data } = await shopifyResponse.json();
  const product = data?.product;

  if (product) {
    // 3. Save the retrieved data to Redis (TTL: 1 hour = 3600 seconds)
    await redis.set(cacheKey, JSON.stringify(product), { ex: 3600 });
  }

  return product;
}

---

4. HadayaLab's E-Commerce Performance Optimization Plans

HadayaLab provides engineering support to improve conversion rates (CVR) and SEO rankings by accelerating e-commerce site load speeds.

• Building Multi-Location Caches with Upstash Redis: A cache architecture that can be accessed at maximum speed from anywhere in the world.
• Dynamic Cache Clearing via Webhooks (ISR/On-Demand Revalidation): Real-time synchronization settings that instantly invalidate only the relevant Redis cache the moment a product is updated in the Shopify admin panel.
• Core Web Vitals Score Improvement: Identifying bottlenecks in web rendering and thoroughly tuning metrics such as LCP, FID, and CLS.

If you are an e-commerce manager who feels that "our brand's e-commerce site is sluggish and we are dissatisfied with its display speed," or if you are "hesitant about the design approach for headless e-commerce," please contact HadayaLab about our speed optimization services.