loneProgrammer

Caching in NextJs

NextJs

Next.jsは、アプリケーションのパフォーマンスを最適化し、コストを削減するために、包括的なキャッシュシステムを提供します。

デフォルトで最適な設定が施されており、必要に応じてカスタマイズが可能です。

概要

Next.jsは、アプリケーションのパフォーマンスを最適化し、コストを削減するために、包括的なキャッシュシステムを提供します。デフォルトで最適な設定が施されており、必要に応じてカスタマイズが可能です。

キャッシュメカニズム

メカニズム 対象 場所 目的 持続期間
Request Memoization 関数の戻り値 サーバー Reactコンポーネントツリーでのデータ再利用 リクエスト中
Data Cache データ サーバー リクエスト間でのデータ保持 永続的*
Full Route Cache HTMLとRSC サーバー レンダリングコスト削減 永続的*
Router Cache RSCペイロード クライアント サーバーリクエスト削減 セッション中

*revalidationで更新可能

各キャッシュの詳細

  • Request Memoization
  • コード例
  • // 自動的にメモ化される
async function getData() {
  const res = await fetch('https://api.example.com/data')
  return res.json()
}
// 最初の呼び出し（キャッシュMISS）
const data1 = await getData()
// 2回目の呼び出し（キャッシュHIT）
const data2 = await getData()
  • 特徴
  • React組み込みの機能
  • GETリクエストのみ対象
  • Reactコンポーネントツリー内でのみ有効
  • レンダリング完了後にクリア
  • Data Cache
  • 設定オプション
  • // デフォルトのキャッシュ
fetch('https://api.example.com/data')
// キャッシュの無効化
fetch('https://api.example.com/data', { cache: 'no-store' })
// 時間ベースの再検証
fetch('https://api.example.com/data', { next: { revalidate: 3600 } })
  • Full Route Cache
  • 主な特徴
  • 静的ルート：ビルド時にキャッシュ、高速な応答が可能
  • 動的ルート：リクエスト時にレンダリング、キャッシュされない
  • Router Cache
  • 機能と特徴
  • メモリ内クライアントサイドキャッシュ
  • ルートセグメントごとのRSCペイロード保存
  • 即時ナビゲーション実現
  • ReactとブラウザーのState保持

キャッシュの制御

  • 再検証（Revalidation）方法
  • 時間ベース
  • // 1時間ごとに再検証
fetch('https://api.example.com/data', {
  next: { revalidate: 3600 }
})
  • オンデマンド
  • // タグベース
revalidateTag('collection')
// パスベース
revalidatePath('/path')
  • キャッシュの無効化
  • // Data Cacheの無効化
fetch('https://api.example.com/data', {
  cache: 'no-store'
})
// Full Route Cacheの無効化
export const dynamic = 'force-dynamic'
// Router Cacheの無効化

ベストプラクティス

  • 推奨事項
  • デフォルト設定の活用
  • Next.jsの自動最適化を信頼
  • 必要な場合のみカスタマイズ
  • 適切な再検証戦略の選択
  • 定期更新 → 時間ベース
  • 即時更新 → オンデマンド
  • キャッシュの相互作用の理解
  • Data Cache → Full Route Cacheに影響
  • Router Cacheは独立して動作
  • Server Actionsで複数キャッシュを無効化可能
  • 注意点
  • 不必要なキャッシュ無効化を避ける
  • パフォーマンスモニタリングを実施
  • フレッシュネスとパフォーマンスのバランス
  • 一般的なパターン
  • ハイブリッドキャッシング
  • // 静的データ
const staticData = await fetch('/api/static', {
  next: { revalidate: 3600 }
})
// 動的データ
const dynamicData = await fetch('/api/dynamic', {
  cache: 'no-store'
})
  • 選択的再検証
  • async function updateData(formData) {
  'use server'
  await saveToDatabase(formData)
  revalidatePath('/affected-path')
  revalidateTag('affected-collection')
}

このドキュメントはNext.jsのキャッシュメカニズムの基本を説明しています。より詳細な情報は公式ドキュメントを参照してください。

↓ お勧め記事 ↓