13. キャッシュと revalidate — 取得結果を使い回す

毎回同じデータを取りに行くのは無駄なので、Next.js は fetch の結果をキャッシュ(保存)して使い回せます。fetch の第2引数に { next: { revalidate: 60 } } のように書くと、「60秒間は保存した結果を返し、期限が切れたら取り直す」という動きになります。

実務では「ニュース一覧は60秒キャッシュ」「会社概要は1日キャッシュ」のように、データの鮮度がどれくらい重要かで秒数を決めます。アクセスのたびに API やデータベースを叩かずに済むので、表示が速くなり負荷も下がります。

下のコードは、この「期限付きキャッシュ」の仕組みを Map で再現したものです。期限内はキャッシュが返り、期限が切れると取り直す、という流れを実行して確かめてみてください。

▶ サンプルコードを実行してみよう(自由に書き換えてOK)

TypeScript

// fetch のキャッシュと revalidate の動きを Map で再現
type CacheEntry = { value: string; storedAt: number };

const cacheStore = new Map<string, CacheEntry>();
let currentTime = 0; // 仮想の時刻(秒)

function fetchWithCache(url: string, revalidateSec: number): string {
  const entry = cacheStore.get(url);
  if (entry && currentTime - entry.storedAt < revalidateSec) {
    return entry.value + " (キャッシュから)";
  }
  // 期限切れ or 初回 → 新しく取得して保存し直す
  const fresh = url + " のデータ(" + currentTime + "秒時点)";
  cacheStore.set(url, { value: fresh, storedAt: currentTime });
  return fresh + " (新しく取得)";
}

console.log(fetchWithCache("/api/posts", 60)); // 初回 → 取得
currentTime = 30;
console.log(fetchWithCache("/api/posts", 60)); // 60秒以内 → キャッシュ
currentTime = 90;
console.log(fetchWithCache("/api/posts", 60)); // 期限切れ → 再取得

公式ドキュメントで詳しく ↗