02. cacheLife() プロファイル
cacheLife()を使ってキャッシュの有効期限を制御する方法を学びましょう。
プリセットプロファイル
よく使われるキャッシュ期間があらかじめ定義されています
プリセットプロファイルの使用
import { cacheLife } from "next/cache";
async function getData() {
"use cache";
cacheLife("hours"); // プリセット: seconds, minutes, hours, days, weeks, max
return await fetchData();
}seconds プロファイル
読み込み中...
minutes プロファイル
読み込み中...
hours プロファイル
読み込み中...
利用可能なプリセット
seconds短時間（頻繁に更新）minutes中期間（定期更新）hours長期間（低頻度更新）days日単位（ほぼ静的）weeks週単位（静的コンテンツ）max最長期間（完全に静的）カスタムプロファイル（インライン）
より細かい制御が必要な場合は、カスタム設定を使用します
カスタムプロファイルの定義
import { cacheLife } from "next/cache";
async function getData() {
"use cache";
cacheLife({
stale: 30, // 30秒後にstaleになる
revalidate: 60, // 60秒後に再検証開始
expire: 180, // 180秒後に完全に期限切れ
});
return await fetchData();
}カスタム設定の結果
読み込み中...
カスタムプロファイルのパラメータ
stale(秒)- この時間後にコンテンツがstale（古い）とマークされる
revalidate(秒)- この時間後にバックグラウンドで再検証が開始される
expire(秒)- この時間後にキャッシュが完全に期限切れになる
💡 stale-while-revalidate パターン
stale期間中は古いコンテンツを返しながら、バックグラウンドで新しいデータを取得します。 これにより、ユーザーは待たされることなく、常に高速なレスポンスを得られます。
next.config.tsでのプロファイル定義
アプリケーション全体で再利用できるプロファイルを定義
next.config.tsでのカスタムプロファイル定義
// next.config.ts
export default {
experimental: {
cacheLife: {
// カスタムプロファイルを定義
frequent: {
stale: 10,
revalidate: 30,
expire: 60,
},
},
},
};
// 使用例
async function getData() {
"use cache";
cacheLife("frequent"); // 定義したプロファイルを使用
return await fetchData();
}使用例
- • ブログ記事:
daysまたはweeks - • ダッシュボード:
minutes - • リアルタイムデータ:
secondsまたは動的レンダリング - • 静的コンテンツ:
max
✅ ベストプラクティス
- • コンテンツの更新頻度に応じて適切なプロファイルを選択
- • stale期間は短く、expire期間は長めに設定するとUXが向上
- • よく使う設定はnext.config.tsで定義して再利用
- • パフォーマンスとデータの鮮度のバランスを考慮
次のステップ
cacheLife()によるキャッシュ制御を理解したら、次はSuspense境界と組み合わせた部分的プリレンダリングを学びましょう。
03. Suspense境界との統合 →