メインコンテンツまでスキップ

staleTimes

staleTimesは、client-side router cacheでページセグメントのキャッシュを可能にする実験的な機能です。

この実験的な機能を有効にし、カスタムの再検証時間を提供するには、実験的なstaleTimesフラグを設定します：

next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    staleTimes: {
      dynamic: 30,
      static: 180,
    },
  },
}

module.exports = nextConfig

staticとdynamicプロパティは、異なるタイプのリンクプリフェッチに基づく期間（秒単位）に対応しています。

  • dynamicプロパティは、ページが静的に生成されていないか、完全にプリフェッチされていない場合（例：prefetch={true}を使用）に使用されます
    • デフォルト：0秒（キャッシュされない）
  • staticプロパティは、静的に生成されたページ、またはLinkのprefetchプロップがtrueに設定されている場合、またはrouter.prefetchを呼び出す場合に使用されます
    • デフォルト：5分

Good to know:

  • Loading boundariesは、この設定で定義されたstatic期間に再利用可能と見なされます。
  • これは部分レンダリングには影響しません。つまり、共有レイアウトはナビゲーションごとに自動的に再フェッチされるのではなく、変更されるページセグメントのみが再フェッチされます。
  • これは、レイアウトシフトを防ぎ、ブラウザのスクロール位置を失わないようにするために、戻る/進むキャッシュの動作を変更しません。

Client Router Cacheについての詳細はこちらで学べます。

バージョン履歴​

バージョン変更点
v15.0.0dynamic staleTimesのデフォルトが30秒から0秒に変更されました。
v14.2.0実験的なstaleTimesが導入されました。