Next.js の 'use cache' ディレクティブでコンポーネントレベルのキャッシュが可能

Server Component のデータ取得にキャッシュを効かせたくて Next.js のドキュメントを読んでいたら、従来の fetch(..., { next: { revalidate: 60 } }) とは別に "use cache" ディレクティブが追加されていた。驚いたのは、fetch に限らず任意の非同期関数や Server Component にそのまま使えること：

TypeScript

async function getData() {
  "use cache";
  const res = await fetch("https://api.example.com/data");
  return res.json();
}

従来のパターンだと fetch の呼び出しごとにキャッシュ設定を書く必要があったが、"use cache" なら関数単位でキャッシュが効く。データベースクエリや外部 API のラッパー関数にもそのまま使えるのが嬉しい。キャッシュ期間は cacheLife で制御する：

TypeScript

import { cacheLife } from "next/cache";
 
async function getData() {
  "use cache";
  cacheLife("hours");
  // ...
}

定義済みプロファイル: "seconds", "minutes", "hours", "days", "weeks", "max"。next.config.ts の cacheLife でカスタムプロファイルも定義できる。