Next.jsでgetStatic〜でデータを読み込むとデータを更新しても再レンダリングされない

例えばgetStaticPropsなんかでサーバ側でデータを取得してレンダリングを行うと、そのままではデータが動的に変更されても再描画がおこらなかった。

サーバ側での処理は基本的にはサーバサイドで処理が完了してその結果を戻すのみでSSGであり、再リクエストしてもそのデータはbuildされた時点のものから書き換わらない。

ローカルだとリクエストのたびに再ビルドされるので、一見気づかずそのまま作り込んで、サーバに上げるとローカルですでに登録したデータでbuildした内容しか表示されず困惑した。

サーバ側ではキャッシュが維持されるため、キャッシュをクリアして再描画を行うパラメータを付与してやる必要がある。

一番簡単なのはrevalidateの数値を設定すること。具体的には以下。

export const getStaticProps: GetStaticProps = async () => {
  // 書籍のシリーズの一覧
  const allSeries = await getSeriesAll(true);
  const allBooks = await getBooksAllIsbn()

  return {
    props: { allSeries, allBooks },
    revalidate: 1 ←これ
  };
};

データが書き換わってから指定した秒数後のリクエストには新しいデータで再描画して返す、ってことらしい。

なので挙動的には新しいデータを登録してすぐリロードしても変わらないが、もう一回リロードすると変わってる、みたいな感じ。

一人でテストやってると変な挙動だけど、要はこれ他の誰かが登録したら、次に見た人は変わってる、ということだと思うからこれでいいのか。

revalidatePathなど、パス指定でon-demandにキャッシュをクリアする方法もあるが、色々試してみてまだうまく扱えてないのでとりあえずまだ書かない。