[今さら始める Next.js マスター #4] キャッシュとパフォーマンス最適化

キャッシュとは

キャッシュは、一度作った結果や取得したデータを再利用する仕組みです。毎回同じ処理をやり直さずに済むため、ページ表示を速くし、サーバー負荷も下げられます。

Next.jsでは、静的生成、データ取得、ルート単位の再検証など、複数の層でキャッシュを扱えます。

なぜ重要なのか

パフォーマンスはユーザー体験に直結します。表示が速いページは読まれやすく、検索エンジンにも評価されやすくなります。

特にブログ、ドキュメント、商品一覧のように頻繁には変わらないコンテンツでは、キャッシュの効果が大きくなります。

fetchのキャッシュ戦略

Next.jsではfetchにオプションを付けて、データをどのように扱うか指定できます。

await fetch("https://example.com/api/posts", {
  next: { revalidate: 3600 },
});

example.com/api/posts は説明用URLなので、実際に応答する自分のAPIへ置き換えて読みます。3600 は秒単位の再検証間隔です。まず取得するデータと更新を許容する間隔を決め、その後に画面がいつ新しい値を必要とするかを考えましょう。

revalidateの考え方

revalidateは「どのくらいの間、古いデータを使ってよいか」を決めるための設定です。

データの種類	方針
ほぼ変わらない記事	長めにキャッシュ
商品在庫や価格	短めに再検証
ログインユーザー情報	キャッシュしない

すべてを長くキャッシュすれば良いわけではありません。データの性質に合わせて決めることが大切です。

最適化の基本方針

• 変わりにくいページは静的に近づける
• 変わりやすいデータは再検証の間隔を短くする
• ユーザーごとに違う情報はキャッシュ対象から外す
• 画像やフォントの最適化も合わせて考える

キャッシュは速さのためだけでなく、安定した運用のための設計でもあります。