Portfolioこのプロジェクトについて
ISR（Incremental Static Regeneration）は、Next.jsの機能で、静的ページを生成しつつ、設定した間隔で自動的に更新する仕組みです。
ECサイトでは商品情報を常に最新に保ちながら、高速な表示を実現する必要があります。ISRを活用することで、キャッシュからの高速配信とデータの鮮度を両立できます。
詳しく知りたい方へ
ISRについて3つの記事で詳しく解説しています。
1
ISRとは？
ISRの基本的な考え方、従来の静的生成（SSG）やサーバーサイドレンダリング（SSR）との違いを解説します。
2
ISRで実現する高速表示
表示速度の改善、Core Web Vitalsへの効果、API呼び出し回数の削減など、ISRがもたらすメリットを解説します。
3
ISRの仕組み
revalidateの設定、オンデマンドISR、Webhook連携など、実装の仕組みを解説します。
構成図
従来のSSR（サーバーサイドレンダリング）
ユーザー
リクエスト
→
サーバー
API呼び出し→HTML生成（毎回処理・待ち時間あり）
ISR（ビルド時）
API
データ取得
静的HTML生成
ビルド
CDNに配置
配信準備完了
ISR（ユーザーアクセス時）
ユーザーアクセス
リクエスト
CDN
キャッシュから即座に表示（高速）
revalidate時間経過後
バックグラウンドで更新
On-Demand ISR（商品更新時）
Webhook
商品更新通知
API Route
キャッシュ無効化
次回アクセスで再生成
最新データ反映
使用技術
- Next.js (App Router)
- Vercel (ホスティング・Edge Network)
- Shopify Storefront API
- Shopify Webhook