Next.js の revalidatePath。最小構成サンプル

import type { Metadata } from "next";
 
export const metadata: Metadata = {
  title: "更新して作り直すの最小構成",
};
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return <main>{children}</main>;
}

更新と、作り直しは別のこと

データを1つ増やしても、画面は変わりません。このページはビルド時に作られたものが配られているからです。

1. 1
   Browser

   ボタンが押される

   普通の form の送信。

2. 2
   Server

   データを増やす

   ここまでは、出来上がった画面に何も起きない。

3. 3
   Server

   作り直せと言う

   revalidatePath。ここを忘れると古いまま。

4. 4
   Browser

   新しい画面が届く

   次に開いたときには作り直されている。

この2つが1組です。片方だけでは足りません。

呼ばないとどうなるか

実機で確かめました。revalidatePath を外して2回押しても、表示は 0 のままでした。データは増えているのに、画面がそれを知りません。

作り直されたことを目で見る

このサンプルは、数だけでなくその画面が作られた時刻も出しています。

実機で確かめた動きです。

押す前        押された回数：0   作られた時刻：22:08:19
1回押した後    押された回数：1   作られた時刻：22:09:16
2回押した後    押された回数：2   作られた時刻：22:09:19

時刻が変わっているのが、作り直された証拠です。数だけを見ていると「保存されたのかな」で終わりますが、時刻まで出すと何が起きたのかが見えます。

このページはビルド時に作られている

app/page.tsx は、Cookie もヘッダーも検索語も読んでいません。だから Next.js はビルド時に作ってしまいます。

├ ○ /demo/revalidate      ← ○ はビルド時に作った印

実機で確かめました。応答は 0.004 秒です。サーバーは何も作っていません。出来上がったものを渡しているだけです。

何を作り直させるか

revalidatePath("/demo/revalidate")

渡すのはパスです。そのページの出来上がりを捨てて、次に開いたときに作り直させます。

一覧と詳細のように複数のページが同じデータを見ているときは、両方を捨てる必要があります。片方だけ捨てると、もう片方が古いまま残ります。

多くのページにまたがるデータなら、パスではなく、データに付けたタグで捨てる方法もあります（revalidateTag と updateTag）。

誰でも呼べる入口だという前提

作り直しは、サーバーに仕事をさせる操作です。だから回数を絞っています。

if (!take(`demo-revalidate:${await clientIp()}`, 20, 60_000)) return

ここから足していくとき

• データベースへ。app/store.ts の中を置き換えるだけで、ページ側は変わりません
• 時間で作り直す。revalidate を書くと、一定時間で自動的に古いものを捨てられます
• 札で作り直す。複数のページをまとめて捨てたいときは、パスではなく札を使います

更新を書いたら作り直しも書く。この組を崩さなければ、あとは置き換えるだけです。