Next.js

Next.jsのISR（Dynamic Routes + Fallback）で遷移した際に静的ページが生成されない問題

2021/03/09

背景

半年ほど前に, 知人とサウナに行った際に『時代はNext.js. ISRが凄い』というお話を聞いており,
TogelloというサービスのWeb版を作成する際に, ISRを体験したいためだけにNext.jsで作成した.

機能の一つで日程調整の詳細画面があり, getStaticProps 内でOGP画像を生成するという処理にしていた.
しかし, 遷移方法や表示回数によって, OGP画像を認識する時としない時があり, 挙動の調査をした.

問題

調査の結果わかったことは以下の3つ.

  • 一覧画面から遷移(next/link)した際はOGP画像が認識されない
  • データ作成時に詳細画面に遷移(next/router）した際はOGP画像が認識されない
  • データ作成後, 詳細画面のURLを『Twitter Cards Validator』で1回目テストした際にはOGP画像として認識されないが, 2回目のテストをした際はOGP画像が認識される

ここから予測できることは,

  • ISR自体はうまく動いている
  • next/link や next/router で遷移した際は, ページの表示した後にデータを非同期で取得しているっぽい？

解決策

初回アクセスした際に静的ページを生成したい場合は, aタグ で遷移させるか,
window.location.href で遷移することで, 静的ページが生成されると思う.

propsの値を利用する場合は, 表示されるまでローディングを表示したり,

const router = useRouter()
if (router.isFallback) {
  return <div>Loading...</div>
}

取得するまで再読み込みなどで対応できると思う.

useEffect(() => {
  if (!hoge) {
    setTimeout(() => location.reload(), 300)
  }
}, [props.hoge])

所感

実際触ってみて, 知人が教えてくださった素晴らしさを理解することができた.
前職でNext.jsは触っていたが, SSRオンリーだったため, Togelloを作ってみて, このページはSSRでこのページはISRみたいにできるのを知って本当に感動した.

統合開発環境さんのISRでブログを作ってみて気づいたこと・ハマったことがとても分かりやすかったため, ISRの挙動について詳細に調べておらず, 僕自身Next.jsの知識が乏しいため間違っている部分が多くあると思うので, Twitterなどで指摘してくれると嬉しい.

Next.jsReact

Twitterフォロー待ってます！