LoginSignup
7

More than 3 years have passed since last update.

ISR(Incremental Static Regeneration)とは?

Last updated at Posted at 2021-02-21

ISR(Incremental Static Regeneration)とは?

Next.js のビルドにはいくつかパターンがあります。その中でNext.js 9.4 からIncremental Static Regeneration という機能が導入されました。

直訳すると、(段階的な静的サイト生成)となります。
簡単に説明すると、リクエストに対して静的にビルドされたページを返す。かつ、有効期限を超えたら非同期で静的ページの再生成をSSRで行うことです。

図1.png

メリットって?

  • 事前にすべてのページ生成はせず、1度リクエストされた際のレスポンス内容が生成される。
  • アクセス時に初めて生成されるので初回ビルドが高速になる。
  • 一定期間ごとにSSRを行うので、描画が高速になる。
  • CDNのキャッシュを有効活用しつつ、静的ページの更新を自動的に行え、一定時間後再度リクエストがあった場合、次回以降の内容をビルドするので内容が更新される。

VercelにDeployしてみる

ISRのpagesコンポーネントを作成

  • getStaticProps で revalidate を設定すると ISR になります。
  • revalidate の値は、前回から何秒以内のアクセスを無視するかを指定します。
pages/index.tsx
export default function Index({current}) {
  return (
    <div>
        現在時刻は{current}です
    </div>
  );
}

export async function getStaticProps() {
    const date = new Date();
    const current = date.toLocaleString()
  return {
    props: {
      current,
    },
    revalidate: 10,
  };
}

VercelにDeployしてみる

上記のコードをVercelにdeployして挙動を確認してみました。
コード的には、10秒間はキャッシュされたデータが返却され、10秒後に再描写され内容が更新されていることが確認できます。

output.gif

参考

Zenn 個人開発の限界に挑んだ話
Next.jsのIncremental Static RegenerationをVercel以外でやってみる

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7