staleTimes

staleTimes は、クライアントサイドルーターキャッシュでページセグメントをキャッシュする実験的機能です。

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

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

module.exports = nextConfig

staticdynamic プロパティは、異なるタイプのリンクプリフェッチに基づいて時間(秒単位)に対応しています。

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

知っておくと便利:

  • ローディング境界は、この設定で定義された static 期間中に再利用可能と見なされます。
  • これは部分レンダリングには影響せず、共有レイアウトはすべてのナビゲーションで自動的に再取得されず、変更されるページセグメントのみが対象となります。
  • これは戻る/進むキャッシュの動作を変更せず、レイアウトシフトを防ぎ、ブラウザのスクロール位置を失うことを防ぎます。

クライアントルーターキャッシュについて詳しくはこちらをご覧ください。

バージョン履歴

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

On this page