ISR

アイエスアール

ISR を分かりやすく？

ISR は、Incremental Static Regeneration の略で、Next.js が提供する静的サイトジェネレーションの機能の一つです。

通常、静的サイトジェネレーションでは、ビルド時に全てのページを生成するため、動的なコンテンツを含んだページを生成する際には、それらのページを全てビルドし直す必要があります。これによってビルド時間が長くなってしまったり、動的なコンテンツの更新に伴い全てのページを再ビルドする必要があったりといった問題が生じます。

そこで、ISR を利用することで、静的サイトジェネレーションを行う際に、ビルドされたページを再生成することで、動的なコンテンツを含んだページを更新することができます。これによって、動的なコンテンツを扱いながらも高速なサイトの表示が可能となります。

ISR の使い方

ISR を使用するには、getStaticProps のオプションに revalidate を設定します。revalidate には、再生成の間隔を秒単位で指定します。

import { GetStaticProps } from 'next'

export const getStaticProps: GetStaticProps = async () => {
  const res = await fetch('https://example.com/api/data')
  const data = await res.json()

  return {
    props: {
      data,
    },
    revalidate: 60,
  }
}

export default function Home({ data }) {
  return (
    <div>
      {data.map((d) => (
        <div key={d.id}>
          <h2>{d.title}</h2>
          <p>{d.content}</p>
        </div>
      ))}
    </div>
  )
}

上記の例では、60 秒毎にページを再生成するように設定されています。この設定により、60 秒以内にアクセスがあった場合にはビルドされたページが返されますが、60 秒以上経過した場合には、再度ビルドが行われます。

ISR を使用することで、動的なコンテンツを含んだページを高速に表示することが可能となります。

次に、getStaticPropsを使用して ISR を使用する方法を紹介します。getStaticPropsは、静的なページのデータをフェッチするために使われますが、Next.js では ISR にも使用されます。ISR を使用するには、revalidateオプションをgetStaticPropsから返す必要があります。revalidateオプションは、再検証までの秒数を設定することができます。たとえば、以下の例では 10 秒ごとに再検証されます。

import { GetStaticProps } from 'next'
import { Article } from '../types'

type Props = {
  articles: Article[]
}

const IndexPage = ({ articles }: Props) => {
  return (
    <ul>
      {articles.map((article) => (
        <li key={article.id}>
          <h2>{article.title}</h2>
          <p>{article.body}</p>
        </li>
      ))}
    </ul>
  )
}

export default IndexPage

export const getStaticProps: GetStaticProps<Props> = async () => {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts')
  const articles: Article[] = await res.json()

  return {
    props: { articles },
    revalidate: 10,
  }
}

上記の例では、getStaticPropsでデータをフェッチし、10 秒ごとに再検証されるように設定されています。

ISR を使用すると、データが更新されたときに再検証されるため、ユーザーが更新されたコンテンツを素早く表示することができます。しかし、ISR は再検証が必要な静的ページにのみ適しているため、動的なページには適していません。

Next.js を学ぶ一覧へ