On-demand ISR

オンデマンドアイエスアール

On-demand ISR を分かりやすく

On-demand ISR（オンデマンドアイエスアール）は、Next.js の機能で、データが変更されたときに静的ページをリビルドする機能です。ISR は「Incremental Static Regeneration」の略であり、従来の静的サイト生成（SSG）とは異なり、ページをリビルドする際に全てのページを更新するのではなく、必要なページだけを更新します。これにより、リアルタイム性とパフォーマンスが向上します。

基本的な On-demand ISR の実装

On-demand ISR を実装するためには、Next.js のgetStaticProps関数を使用します。getStaticPropsは、ビルド時にサーバーサイドで実行される関数で、静的ページのデータを提供します。On-demand ISR を有効にするには、getStaticProps関数内でrevalidateオプションを設定します。revalidateには、再生成の間隔（秒）を設定します。

// pages/posts/[id].tsx
import { GetStaticPaths, GetStaticProps } from 'next'
import { useRouter } from 'next/router'
import { Post, getPost, getPostIds } from '../../lib/posts'

interface PostPageProps {
  post: Post
}

const PostPage = ({ post }: PostPageProps) => {
  const router = useRouter()

  if (router.isFallback) {
    return <div>Loading...</div>
  }

  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </div>
  )
}

export const getStaticPaths: GetStaticPaths = async () => {
  const paths = getPostIds().map((id) => ({ params: { id } }))
  return { paths, fallback: true }
}

export const getStaticProps: GetStaticProps<PostPageProps> = async ({ params }) => {
  const post = getPost(params.id as string)
  return { props: { post }, revalidate: 10 }
}

export default PostPage

上記の例では、getStaticProps関数でrevalidate: 10を設定しています。これにより、10 秒ごとにページが再生成されます。

データの変更に対応する

データが変更されたときに、On-demand ISR をトリガーする方法はいくつかあります。例えば、データベースの Web フックを使用して、データが更新されたときに Next.js に通知することができます。これにより、データの変更をリアルタイムに反映することができます。

Vercel と Web フックを使用したデータ更新のトリガー

Next.js アプリケーションを Vercel でデプロイしている場合、Web フックを使用してデータの更新をトリガーすることができます。まず、Vercel のダッシュボードでプロジェクトの設定に移動し、「Web フック」セクションで新しい Web フックを作成します。作成した Web フックの URL をデータベースや CMS で設定し、データが更新されたときに Web フックが呼び出されるようにします。

次に、Next.js アプリケーション内で、Vercel の Web フックを受信する API エンドポイントを作成します。以下の例では、pages/api/update-posts.tsという API エンドポイントを作成し、Vercel の Web フックを受信しています。

// pages/api/update-posts.ts
import { NextApiRequest, NextApiResponse } from 'next'

export default async (req: NextApiRequest, res: NextApiResponse) => {
  if (req.method === 'POST') {
    // VercelのWebフックを受信した後の処理を実装します。
    // 例: データの変更を検知し、必要に応じてISRをトリガーします。

    res.status(200).json({ message: 'Webhook received' })
  } else {
    res.status(405).json({ message: 'Method not allowed' })
  }
}

この API エンドポイントをデータベースや CMS の Web フックとして設定することで、データの変更を検知し、必要に応じて On-demand ISR をトリガーすることができます。

On-demand ISR の利点

On-demand ISR は、次のような利点があります。

リアルタイム性: データの変更がリアルタイムに反映されます。
パフォーマンス: 必要なページだけが更新されるため、ビルド時間が短縮されます。
スケーラビリティ: 大量のページがあっても、必要なページだけが更新されるため、スケーラビリティが向上します。

これらの利点により、On-demand ISR は、Next.js アプリケーションのパフォーマンスやリアルタイム性を向上させるだけでなく、開発者の作業効率も向上させます。静的ページの生成にかかる時間を短縮することで、デプロイ時間が短くなり、変更を迅速に適用することができます。

注意点と制限事項

On-demand ISR を使用する際には、いくつかの注意点と制限事項があります。

キャッシュの管理: On-demand ISR を使用すると、ページが更新されるタイミングが不定になるため、キャッシュの管理が重要になります。Next.js と Vercel では、キャッシュの管理が簡単に行えるようになっていますが、他のプラットフォームや CDN を使用する場合は、キャッシュの設定に注意が必要です。
サーバーレス関数の制限: On-demand ISR は、Next.js のサーバーレス関数を利用して実行されます。そのため、サーバーレス関数の制限（実行時間、リソース使用量など）に影響を受けることがあります。大規模なアプリケーションや高負荷な状況では、これらの制限に対処するために、適切な設定や最適化が必要になる場合があります。

まとめ

On-demand ISR は、Next.js の強力な機能であり、データの変更をリアルタイムに反映しながら、パフォーマンスとスケーラビリティを向上させることができます。Next.js と TypeScript を組み合わせることで、より堅牢でメンテナンス性の高いアプリケーションを構築することができます。On-demand ISR を適切に活用することで、革新的な Web アプリケーションを開発し、最高のユーザーエクスペリエンスを提供することができます。

Next.js を学ぶ一覧へ