このプロジェクトについて
ECサイトの運営では、「表示はもっと速くしたい」と「商品情報は常に最新にしたい」という2つの要望がセットでやってきます。ただ、この2つは仕組みのうえでは引っ張り合う関係で、表示を速くするために情報を固定すれば更新が遅れ、常に最新を返そうとすれば表示が重くなります。
このプロジェクトでは、Next.js（ネクストジェイエス。Webサイトを作るための土台になる仕組み）のISRという機能を使って、この両立を実現しました。ISRは、ページをあらかじめ作り置きして高速に配信しながら、決めた間隔で自動的に作り直してくれる仕組み。さらにWebhook（何かが起きたときに自動で通知を送る仕組み）と組み合わせることで、管理画面で商品情報を更新すると、ほどなくサイトに反映される状態を作っています。
実装は、非エンジニアの立場からAIエージェント（AIによる開発支援）に構成を伝えて進めたものです。「どのページを何秒ごとに更新するか」という方針さえ決めれば、仕組みそのものは無理なく組み立てられました。
詳しく知りたい方へ
ISRについて、3つの記事に分けて解説しています。基礎 → 効果 → 仕組みの順で読めるように整理しました。
ISRとは？
ISRの基本的な考え方、従来の静的生成（SSG）やサーバーサイドレンダリング（SSR）との違いを解説します。
ISRで実現する高速表示
表示速度の改善、Core Web Vitalsへの効果、API呼び出し回数の削減など、ISRがもたらすメリットを解説します。
ISRの仕組み
revalidateの設定、オンデマンドISR、Webhook連携など、実装の仕組みを解説します。
構成図
従来の方式では、ユーザーがページを開くたびにサーバーがその場でページを組み立てるため、毎回待ち時間が発生します。
公開の前にページを作り置きして、世界各地の配布拠点（CDN）に置いておく流れです。
ユーザーには作り置きしたページを即座に返し、有効期間が過ぎたら裏側で新しく作り直します。
商品更新の通知をきっかけに古い作り置きを捨て、次のアクセスで最新版に差し替える流れです。
使用技術
- Next.js (App Router)
- Vercel (ホスティング・Edge Network)
- Shopify Storefront API
- Shopify Webhook