【Next.js】ISRとは…?

はじめに

この記事ではNext.jsを使用する上で避けられない以下のレンダリング(=データフェッチ)について解説してきます。

• CSR
• SSR
• SSG
• ISR

今回のテーマはISRです。

ISR以外も記事にしていますので興味がある方は是非ご覧ください！

CSRについては以下をご覧ください。

Tomokiの技術ブログ

Tomokiの技術ブログ | 【Next.js】CSRとは…? この記事ではNext.jsを使用する上で避けては通れない概念であるCSRについて解説します。CSRはクライアント側でデータフェッチを行い、レンダリングをするものです。CSRがよ…

SSRについては以下をご覧ください。

Tomokiの技術ブログ

Tomokiの技術ブログ | 【Next.js】SSRとは…? この記事ではNext.jsを使用する上で避けては通れない概念であるSSRについて解説します。SSRはサーバ側でデータフェッチを行い、レンダリングしたHTMLを返すものです。SSRが…

SSGについては以下をご覧ください。

Tomokiの技術ブログ

Tomokiの技術ブログ | 【Next.js】SSGとは…? この記事ではNext.jsを使用する上で避けては通れない概念であるSSGについて解説します。SSGはビルド時にサーバ側でデータフェッチを行い、レンダリングしたHTMLを生成しま…

ISR

ISRはIncremental Static Regenerationの略で、SSGの挙動に加えて一定時間毎にデータの再取得を行いレンダリングを行います。

つまり、SSGとSSRのいいところを両方とってきたイメージになるかと思います。

ISRでは、revalidateというデータの再取得をする一定時間の間隔を指定します。

一定時間経過したらデータを取得するのではなく、一定時間経過後に何かしらリクエストがあったタイミングでそのリクエストには現在表示している古いレンダリング済みのページを返し、裏の方でデータの再取得を行い、レンダリングしたHTMLを生成します。

一定時間経過後に何かしらリクエストの次にリクエストが発生した場合は、裏の方で生成しておいたHTMLを返します。

上記の流れを繰り返すことになります。

イメージ図としては以下のような図になります。

SSGのようにビルド時に事前にデータフェッチをしてレンダリングをする方式のことをプリレンダリング(Pre-Rendering)と言います。

データの取得をビルド時に行うので、ページのデータを更新する際は再度ビルドする必要があります。

ISRはどんな時に使う?

以下の観点に当てはまる場合はISRを使用すると良いでしょう。

SSGとSSRのいいところを両方とってきたイメージがあり、とても有用に思えますが、個人的にはISRの出番がかなり少ないものと思っています。

技術情報共有サービスのZennではISRを過去に採用していたようです。

ISRの実装

ISRの実装例を紹介します。

よくやる実装方法としてはgetStaticPropsを使用してデータフェッチを行います。

getStaticPropsのreturn分でrevalidateを指定します。

import { useState } from 'react'

function Address({ data }) {
  const [data, setData] = useState(null)
  const [isLoading, setLoading] = useState(false)

  if (isLoading) return <p>Loading...</p>
  if (!data) return <p>No profile data</p>

  return (
    <div>
      <h1>{data.results[0].address1}</h1>
      <p>{data.results[0].address2}</p>
      <p>{data.results[0].address3}</p>
    </div>
  )
}

export async function getStaticProps() {
  const res = await fetch('https://zipcloud.ibsnet.co.jp/api/search?zipcode=7830060')
  const data = await res.json()

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

export default Address;

参考

あわせて読みたい

Data Fetching: Incremental Static Regeneration | Next.js Learn how to create or update static pages at runtime with Incremental Static Regeneration.

まとめ

本記事ではNext.jsにおけるデータフェッチのISRについて解説しました。

是非、いいねやコメントをお願いします。