Next.js のISRでブログを作った

このブログのこと。
コンテンツは microCMSで管理。デプロイは vercel、 スタイルは TailwindCSS を初めて使ってみた。
SSG + Webhook で記事登録時に自動ビルドされるようにしてもよかったが、ISRがどういったものなのかドキュメント読んだりするだけではいまいちわからなかったため実際にやってみたくてそちらで動かしている。

公式以外に参考にしたサイトなど

Tailwind CSS 導入

https://panda-program.com/posts/nextjs-tailwind-css
https://zenn.dev/d0ne1s/articles/c4909f32ce8fed5ac251

highlight.js + cheerio で コードブロックの装飾

https://microcms.io/blog/syntax-highlighting-on-server-side/

ルーティングの型

https://zenn.dev/panda_program/articles/typescript-nextjs-routing


Next.js での SSG / ISR について

どういったものであるかという話よりはhow的な話と、具体的な挙動

SSG

next build && next export で静的なファイルを生成してそれを上げるだけ。
pages/~ のファイルで getStaticProps getStaticPaths する。
getStaticPaths の返すオブジェクトで fallback: true を指定すると静的に生成されていないページにアクセスされたときにクライアント側でデータを取ってくる処理をするようになる。
fallback: 'blocking' を指定するとクライアント側ではなくサーバー側でレンダリングしてから返そうとする、つまりSSRと同じ挙動になるらしい。試してはいない。
fallback のデフォルトは false で、その場合は404エラーページとかを返す。

ISR

next build && next start
SSGと違いサーバーを動かすことになる。
getStaticProps の返すオブジェクトで revalidate: 300 のように秒数を指定すると、その秒数が経過毎に初めてアクセスされたときにページを生成して次のアクセス以降その生成したものを返すという挙動になる。つまり、SSG と違いbuild時に全てのページを生成する必要がない。
SSGのときに述べたように fallback: true としていたとすると、具体的には次のような見え方になる。状況としてはこのブログのように コンテンツ一覧ページとして個別ページへのリンクがあるような場合。

コンテンツを追加する → revalidate に指定した時間の区切り後に初めて一覧ページにアクセスする(追加されたコンテンツを含む新しいページが生成される) → もう一度一覧ページにアクセスすると追加されたコンテンツを含むページが返される → 一覧ページのリンクから追加されたコンテンツの個別ページに飛ぶ → 初めてのアクセスなので、CSRされる(裏ではそのページが生成される) → それ以降その個別ページにアクセスすると先程生成された静的ページが返される