during render which is unsupported の直し方

Error: Route / used "revalidatePath /" during render which is unsupported. To ensure revalidation is performed consistently it must always happen outside of renders and cached functions.

いつ出るのか

ページを開くたびに最新を見せたくて、ページの中で作り直しを指示すると出ます。

import { revalidatePath } from 'next/cache'
 
export default function Page() {
  revalidatePath('/')   // ここで止まる
  return <p>記事一覧</p>
}

実機で、3つとも同じ形の文言になりました。

呼んだもの	文言の前半
revalidatePath('/')	used "revalidatePath /" during render
revalidateTag('posts', 'max')	used "revalidateTag posts" during render
updateTag('posts')	used "updateTag posts" during render

ビルドで止まるか、開いて落ちるか

• ビルドのときに描くページ：ビルドが止まる。Error occurred prerendering page の次の行にこの文言が出る
• 開かれるたびに描くページ：ビルドは通り、開いた瞬間に 500 になる。文言はサーバーのログに出る

どちらも実機で確かめました。

なぜ呼べないのか

文言によると、作り直しを一貫して行うために、描いている途中とキャッシュする関数の中では呼べません。

作り直しの指示は「データが変わった」という知らせです。変えたのはデータを書き換えた処理なので、知らせるのもそこです。表示する側が開くたびに知らせるのは、順番が逆です。

直し方

書き換えたところで呼ぶ

データを書き換える Server Action（または Route Handler）の中へ移します。

// app/actions.ts
'use server'
import { revalidatePath } from 'next/cache'
 
export async function addPost(formData: FormData) {
  await savePost(formData)
  revalidatePath('/posts')
}

実機で、フォームからこのような Server Action を送ると、エラーにならず、次に開いたページは新しく描かれていました。作り直される範囲は revalidatePath の使い方にまとめています。

開くたびに最新にしたいなら、作り直さない

書き換えとは関係なく、いつ開いても最新を出したいだけなら、作り直しの指示は要りません。そのページを開かれたときに描く形にします（Next.js のキャッシュ）。

まとめ

1. revalidatePath・revalidateTag・updateTag は、ページを描く途中では呼べない
2. 呼ぶのは、データを書き換えた Server Action や Route Handler
3. いつも最新を出したいだけなら、ページを開かれたときに描く