Upstash Redis2026-06-29
【表示速度改善】Headless ECで超高速応答！Upstash Redisを用いたShopify APIキャッシュ戦略
Headless ECサイトの「表示速度」がコンバージョンに与える影響
Shopifyの管理画面をECのバックエンドとして活用しながら、フロントエンドをNext.jsなどで独自開発する 「Headless（ヘッドレス）EC」。デザインの圧倒的な自由度や、表示パフォーマンスの最適化を求めて、多くのD2C/ECブランドがこのアーキテクチャを採用しています。
しかし、ヘッドレスECを愚直に構築すると、以下のようなパフォーマンスの課題が発生します。
- APIアクセスの都度遅延: ユーザーが商品詳細ページを開くたびにNext.jsからShopify GraphQL APIを叩きに行くと、APIの接続時間（通常100ms〜400ms以上）がそのままユーザーの画面描画遅延に繋がります。
- レートリミットによるエラー発生: アクセスが集中した際、Shopify APIの「API枠（レートリミット）」を消費し尽くし、商品情報や在庫数が取得できずサイトがエラー表示になってしまう。
- サーバーレスキャッシュの制限: Vercelのインメモリキャッシュは、関数インスタンスの再起動（コールドスタート）やスケールアウトによって消失するため、グローバルなデータの一貫性を維持できません。
これらのパフォーマンス課題を一掃するためには、フロントエンド（Next.js）とShopify APIの中間に、超高速で動作するグローバルキャッシュストアである Upstash Redis を配備するのが極めて効果的です。
2. 課題解決のビフォー・アフター
| 項目 | Shopify API直接呼び出し（Before） | Upstash Redis キャッシュレイヤー（After） |
|---|---|---|
| 商品ロード時間 | 平均 250ms〜500ms | 平均 10ms〜30ms（Sub-100msを達成） |
| APIリクエスト消費 | 全リクエストでShopify APIを消費 | キャッシュヒット時はShopifyへのアクセスゼロ（API制限回避） |
| 在庫情報の正確さ | 古いキャッシュにより売り越しが発生 | 在庫数などの動的データのみTTLを短くして精度を維持 |
| ページ表示遅延（LCP） | 表示がワンテンポ遅れる | 瞬時にデータが描画され、離脱率が大幅に低減 |
3. 具体的な実装例：Next.js App Routerでの商品情報キャッシュロジック
商品の基本情報（画像、タイトル、説明文など）をRedisに数時間キャッシュし、高速にレスポンスを返すNext.jsのデータ取得コード例です。
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. まず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. キャッシュがない場合のみ、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. 取得したデータをRedisに保存（有効期限: 1時間 = 3600秒）
await redis.set(cacheKey, JSON.stringify(product), { ex: 3600 });
}
return product;
}
4. HadayaLabのECパフォーマンス最適化プラン
HadayaLabでは、ECサイトの読み込み速度向上によってコンバージョン率（CVR）とSEO順位を改善する、エンジニアリング支援を提供しています。
- Upstash Redisによるマルチロケーションキャッシュ構築: 世界中から最速でアクセスできるキャッシュ構成。
- Webhookによる動的キャッシュクリア（ISR/On-Demand Revalidation）: Shopify管理画面で商品が更新された瞬間に、該当のRedisキャッシュのみを瞬時に破棄するリアルタイム同期設定。
- コアウェブバイタル（Core Web Vitals）のスコア改善: Web表示のボトルネックを特定し、LCP/FID/CLSなどの数値向上を徹底チューニング。
「自社ブランドのECサイトが重く、表示スピードに不満がある」「ヘッドレスECの設計方針で迷っている」というEC責任者様は、ぜひHadayaLabの速度改善サービスについてお問い合わせください。