👏
久しぶりに触るNext.js: Route cache
The Road to Next.jsを受講して、Next.jsについて学ぶ中で、特に prefetch と staleTimes がクライアントサイドのパフォーマンス向上において重要な役割を果たしていることに気付きました。これらの機能を活用することで、リソース消費を最適化し、スムーズなユーザー体験を提供できます。
この記事では、具体例を交えながら、 prefetch と staleTimes の基本的な使い方と注意点について解説します。
prefetch とは？
prefetch は、<Link> コンポーネントのプロパティの一つで、Next.js がリンク先のルートに関連するリソースを事前にフェッチするかどうかを制御します。これにより、クライアントサイドの遷移が高速化されます。
デフォルト動作
- prefetch のデフォルト値はnull
デフォルト設定では、リンク先が静的ルートか動的ルートかに応じて事前フェッチの挙動が異なります。- 静的ルートの場合: ルート全体（データを含む）が事前フェッチされます。
- 動的ルートの場合: 最も近いloading.tsバウンダリ（セグメント単位）まで部分的に事前フェッチされます。
- ビューポートにリンクが表示される（またはスクロールして入る）と、Next.js はリンク先ルートの事前フェッチをバックグラウンドで行います。
※事前フェッチは 本番環境 でのみ有効です。 - ユーザーがリンクにホバーした際、キャッシュデータが期限切れであれば、Next.js は再度事前フェッチを試みます。
カスタマイズ
prefetch プロパティには以下の値を設定できます。
- null（デフォルト）
静的ルートと動的ルートで事前フェッチの挙動が異なります（前述）。 - true
静的ルートでも動的ルートでも、リンク先ルート全体が事前フェッチされます。 - false
ビューポートに入る際も、ホバー時も事前フェッチは一切行われません。
以下は prefetch を明示的に設定した例です。
import Link from 'next/link';
export default function Home() {
return (
<div>
{/* デフォルト動作 */}
<Link href="/about" prefetch={null}>
About (Default)
</Link>
{/* 常に事前フェッチ */}
<Link href="/contact" prefetch>
Contact (Always Prefetch)
</Link>
{/* 事前フェッチを無効化 */}
<Link href="/services" prefetch={false}>
Services (No Prefetch)
</Link>
</div>
);
}
注意点
- 事前フェッチの無効化 (prefetch={false})
リソース消費を抑えたい場合や、リンク先データの最新性が重要で手動での制御が必要な場合に有効です。 - 開発環境での動作
事前フェッチは本番環境でのみ有効です。開発環境での挙動を確認したい場合はアプリケーションをビルドしてから実行する必要があります。
staleTimes とは？
Next.js 13以降 staleTimes は next.config.ts 内で設定できるプロパティで、キャッシュされたデータが「古い」とみなされるまでの期間を制御します。
// next.config.ts
module.exports = {
experimental: {
staleTimes: {
'/about': 60, // 秒単位
},
},
};
基本概念
- キャッシュ有効期間: staleTimes は、特定のルートでフェッチされたデータがキャッシュとして有効な期間を指定します。
- 「古い」データの扱い: 指定された期間が経過すると、データは「古い」とみなされ、新しいリクエストがトリガーされます。
注意点
- 実験的機能: staleTimes は現在、experimental オプションとして提供されており、将来的な変更や非推奨化の可能性があります。プロジェクトに導入する際には、その点を考慮してください。
- 全ルートに適用: 設定は next.config.ts に記載するため、プロジェクト全体に影響を与える可能性があります。適用範囲を考慮したうえで慎重に設定しましょう。
prefetch と staleTimes の注意点とベストプラクティス
注意点
- prefetch の無駄なリソース消費: prefetch をデフォルトで有効化していると、大量のリンクがある場合に帯域幅を消費する可能性があります。適切なリンクでのみ有効化することが重要です。
- staleTimes 設定ミス: 設定値が長すぎると古いデータが表示されるリスクがあり、短すぎると頻繁なリクエストでパフォーマンスが低下する可能性があります。
ベストプラクティス
- 必要なリンクのみ prefetch を有効化し、事前フェッチを最適化する。
- 動的なデータが必要なルートで staleTimes を慎重に設定する。
- staleTimes を利用する場合、ドキュメントや設定値のメンテナンスを行う。
まとめ
Next.jsのprefetch と staleTimes は、ユーザー体験の向上とリソース最適化の両立を可能にする強力なツールです。ただし、特に staleTimes は実験的機能であることを念頭に置き、導入時には慎重な設計が必要です。
Discussion