ISRとは？｜SEO関連用語集

2025年10月28日

読み方: アイエスアール（Incremental Static Regeneration / インクリメンタル静的再生成）

概要

静的サイト生成（SSG）とサーバーサイドレンダリング（SSR）の利点を組み合わせ、静的ページをバックグラウンドで段階的に更新する技術。

詳細説明

ISR（Incremental Static Regeneration / インクリメンタル静的再生成）とは、静的サイト生成（SSG / Static Site Generation）の高速性・SEO最適化とサーバーサイドレンダリング（SSR）の動的コンテンツ更新を組み合わせた次世代レンダリング技術です。ページを最初にビルド時に静的生成し、一定期間（例: 60秒）後にバックグラウンドで自動的に再生成します。ユーザーには常に高速な静的ページ（CDNキャッシュから配信）が提供されつつ、コンテンツは定期的に最新状態に更新されます。Next.jsが2020年に導入し、Vercel、Netlify等のホスティングプラットフォームでサポートされています。大規模サイトで全ページを事前ビルドすると数時間かかる問題を解決し、オンデマンドで必要なページのみ生成・更新できます。

重要性

ISRが重要な理由は以下の通りです。

大規模サイトのビルド時間削減。10万ページのECサイトで全ページ事前生成すると数時間かかるが、ISRは初回アクセス時に生成し、以降はキャッシュ配信するため、ビルド時間が数分に短縮
静的サイトの速度維持。SSG同様に、ページはCDNから即座に配信され、TTFB 50ms以下、LCP 1秒以下を実現しつつ、コンテンツは常に最新
動的コンテンツとSEOの両立。ニュースサイト、ブログ、商品ページ等で、SEOに最適な静的HTMLを維持しながら、価格・在庫・記事内容を定期更新
サーバーコストの大幅削減。SSRのようにリクエストごとにサーバー処理が不要で、CDNキャッシュで配信されるため、トラフィックが100倍でもサーバーコストは変わらない
スケーラビリティ。バイラル記事でトラフィックが急増しても、静的ファイル配信のため、サーバー負荷はほぼゼロ

具体例・実践方法

ISRの実践手順

Next.jsでのISR基本実装

   // pages/blog/[slug].js
   export async function getStaticProps({ params }) {
     // ビルド時とrevalidate後に実行される
     const post = await fetch(`https://api.example.com/posts/${params.slug}`).then(r => r.json())
     
     return {
       props: { post },
       revalidate: 60, // 60秒ごとにバックグラウンドで再生成
     }
   }
   
   export async function getStaticPaths() {
     // 最初にビルドするページを指定（人気記事のみ事前生成）
     const popularPosts = await fetch('https://api.example.com/posts/popular').then(r => r.json())
     
     return {
       paths: popularPosts.map(post => ({ params: { slug: post.slug } })),
       fallback: 'blocking', // 未生成ページは初回アクセス時にSSR、以降ISR
     }
   }
   
   export default function BlogPost({ post }) {
     return (
       
         {post.title}
         
       
     )
   }

revalidate期間の最適化

ニュースサイト: `revalidate: 60`（1分ごと更新）
ブログ記事: `revalidate: 3600`（1時間ごと更新）
商品ページ: `revalidate: 300`（5分ごと、在庫・価格更新）
企業サイト: `revalidate: 86400`（1日ごと）

オンデマンドリバリデーション（ISR 2.0）

   // pages/api/revalidate.js（Webhook用API）
   export default async function handler(req, res) {
     // CMSからのWebhookを受け取り、特定ページを即座に再生成
     
     // セキュリティ: 秘密トークンで検証
     if (req.query.secret !== process.env.REVALIDATE_SECRET) {
       return res.status(401).json({ message: 'Invalid token' })
     }
     
     try {
       // 特定のページを再生成
       await res.revalidate(`/blog/${req.body.slug}`)
       await res.revalidate('/') // トップページも更新
       
       return res.json({ revalidated: true })
     } catch (err) {
       return res.status(500).send('Error revalidating')
     }
   }

CMSとの連携（WordPress、Contentful、Strapi）

   // Contentful Webhookの例
   // Contentful管理画面 → Settings → Webhooks → Create webhook
   // URL: https://example.com/api/revalidate?secret=YOUR_SECRET
   // Trigger: Publish, Unpublish
   
   // pages/api/revalidate.js
   export default async function handler(req, res) {
     const { sys } = req.body
     
     if (sys.type === 'Entry' && sys.contentType.sys.id === 'blogPost') {
       const slug = req.body.fields.slug['en-US']
       await res.revalidate(`/blog/${slug}`)
     }
     
     return res.json({ revalidated: true })
   }

fallbackの3つのモード

   export async function getStaticPaths() {
     return {
       paths: [/* 事前生成するパス */],
       fallback: false, // 未生成ページは404（小規模サイト向け）
       // fallback: true, // 未生成ページはローディング表示後、CSRで取得（UX重視）
       // fallback: 'blocking', // 未生成ページは初回SSR（SEO重視、推奨）
     }
   }

CDNキャッシュとの連携

Vercel: 自動的にEdge NetworkでISRキャッシュ管理
Cloudflare: Cache-Control設定で最適化

   export async function getStaticProps({ res }) {
     res.setHeader('Cache-Control', 's-maxage=60, stale-while-revalidate')
     // 60秒間CDNキャッシュ、期限切れ後もstaleコンテンツ配信しつつ裏で更新
   }

注意点・補足

ISRの注意点は以下の通りです。

revalidate期間中は古いコンテンツが表示される。60秒revalidateの場合、最大60秒間古いデータが表示される可能性。リアルタイム性が必須（株価、スポーツスコア）のページには不向き
初回アクセスのレイテンシ。`fallback: ‘blocking’`の場合、未生成ページの初回アクセスはSSR相当の遅延が発生（TTFB 1〜3秒）
バックグラウンド再生成の失敗。外部API障害時、再生成が失敗しても古いキャッシュが配信され続ける（通常は問題ないが、重要更新時は注意）
ホスティングプラットフォーム依存。ISRはNext.js + Vercelで最適化されており、他プラットフォーム（AWS Amplify、Netlify）では制限がある場合も
データベース負荷。大量ページで同時revalidateが発生すると、データベースやAPIに負荷がかかる可能性

参考リンク・引用元

この記事が気に入ったら
フォローしてね！

Follow @lynx_seo

よかったらシェアしてね！

URLをコピーしました！

ISRとは？｜SEO関連用語集

概要

詳細説明

重要性

具体例・実践方法

{post.title}

関連用語

注意点・補足

最新トレンド（2025年）

参考リンク・引用元