← デモ一覧に戻る

09. Route Handlersのキャッシュ

GET Route HandlersでのCache Components動作を示します。

概念

Route HandlersでもCache Componentsを使用できます。GET メソッドのRoute Handlerで"use cache"を使うことで、レスポンスをキャッシュできます。

これにより、APIエンドポイントのレスポンスを効率的にキャッシュし、パフォーマンスを向上させることができます。

Route Handlersでのキャッシュ

実装方法と注意点

実装方法
const getData = async () => {
  "use cache";
  cacheLife("minutes");
  cacheTag("my-data");
  return { data: "..." };
};

export const GET = async () => {
  const data = await getData();
  return Response.json(data);
};
注意点
  • • GETメソッドでのみ使用可能
  • • POSTなど他のメソッドではキャッシュされない
  • • cacheLifeで適切な期間を設定する
  • • cacheTagで手動再検証が可能

使用例

実際の活用シーン

✅ 適している場合
  • • 外部APIからのデータ取得
  • • データベースクエリ結果
  • • 計算コストの高い処理
  • • 更新頻度が低いデータ
❌ 不向きな場合
  • • リアルタイムデータ
  • • ユーザーごとに異なるデータ
  • • POST/PUT/DELETEメソッド

試してみよう

  1. 各データの初期値を確認してください。
  2. キャッシュありの「キャッシュを再検証」ボタンを押して、revalidateTag()の動作を確認してください。
  3. ページをリロードして、キャッシュなしのデータだけが変わることを確認してください。
  4. 1分以上待ってからページをリロードして、キャッシュありのデータも更新されることを確認してください（cacheLifeの効果）。