この記事を読んだ後に理解できること

• SSGのデメリットについて
• Next.jsのISRの概要について
• ISRの実装方法について

※ この記事では、Next.js12以前のPages RouterでのISRの実装方法等を解説しています。

SSGのデメリットについて

SSGの仕組みは以下となっています。



SSGのデメリットとしては、

• コンテンツの更新等にビルドが必要

が挙げられます。

ISRとは

インクリメンタルスタティックリジェネレーションの略です。

SSGのデメリットを補うことができるNext.jsの機能です。

ISRでは、2つのパターンで再生成が行われます。

• ユーザからのリクエストを受けてから指定した秒数後に再生成
• 指定した秒数ごとにつき1回の再生成

上記のパターンで行われます。

わざわざビルドをせずとも自動で再生成してくれます。

以下の画像では、ユーザからリクエストを受けたケースのISRの挙動について図解しています。

ISRの実装

全容を最初にのせておきます。

/pages/[id].tsx

import { GetStaticPaths, GetStaticProps, NextPage } from "next";
import ArticleDetail from "../../components/view/ArticleDetail";
import { baseUrl } from "../../const/enviroment";
import { articleList } from "../../type/microCms";

type ArticleProps = {
  id: string
  articleList: ArticleList
}

const Article: NextPage<ArticleProps> = (props) => {
  const { article, articleList } = props;
  const articleDetail = articleList.contents.find((value) => {
    return value.id === id
  })

  return (
    <>
      <ArticleDetail
        id={articleDetail === undefined?  '' : articleDetail.id}
        eyeCatch={programArticle === undefined?  alt : articleDetail.eyecatch}
        title={programArticle === undefined? '' : article.title}
        description={programArticle === undefined? '' : articleDetail.description}
        content={articleDetail === undefined? '' : articleDetail.content}
        createdAt={articleDetail === undefined? '' : articleDetail.createdAt}
        updatedAt={articleDetail === undefined? '' : articleDetail.updatedAt}
      />
    </>
  )
}


export const getStaticPaths: GetStaticPaths = async () => {
  const response: ArticleList = await fetcher(`${baseUrl}/api/v1/blogs`)

  const paths = articleList.map((value) => (
    {
      params: {
        id: value.id
      }
    }
  ))
  return { paths, fallback: 'blocking' }
}


export const getStaticProps: GetStaticProps<ArticleProps> = async (context) => {
  const articleList: ArticleList = await fetcher(`${baseUrl}/api/v1/blogs`)
  const params = context.params? context.params['id'] : '';
  const idList = Array.isArray(params)? params[0] : params
  const id = idList === undefined? '' : idList

  return {
    props: {
      id: id,
      articleList: response
    },
    revalidate: 10
  }
}

export default Article

ISRはgetStaticProps のreturnの中にrevalidate という項目を用意し、その値として秒数を設定すると動作するようになります。

export const getStaticProps: GetStaticProps<ArticleProps> = async (context) => {
  const articleList: ArticleList = await fetcher(`${baseUrl}/api/v1/blogs`)
  const params = context.params? context.params['id'] : '';
  const idList = Array.isArray(params)? params[0] : params
  const id = idList === undefined? '' : idList

  return {
    props: {
      id: id,
      articleList: response
    },
    revalidate: 10
  }
}

SSGの実装+revalidateを設定するだけでISRは実装できるので、非常に簡単です。

さいごに

今回は、SSGのデメリット、ISRの概要及び実装方法について解説しました。

SSGの実装方法についてすっ飛ばしていたので、次回はSSGの実装方法について解説したいと思います。