Smile Comfort

Next.jsのCaching（キャッシュ）戦略を徹底解説！ 初心者でもわかる高速化の秘訣

投稿日：
更新日：

1. はじめに：なぜCachingが重要なのか？

Webサイトの表示速度は、ユーザー体験（UX）を大きく左右します。表示が遅いサイトは、ユーザーの離脱率を高め、ビジネスチャンスを逃す原因にもなりかねません。そこで重要になるのが、Caching（キャッシュ）です。

Cachingとは、一度取得したデータを一時的に保存し、次回以降のアクセス時に再利用することで、サーバーへの負荷を軽減し、表示速度を向上させる技術です。Next.jsは、このCachingを効果的に活用するための様々な機能を提供しています。

2. Next.jsのCaching戦略：基本を理解しよう

Next.jsにおけるCachingは、大きく分けて以下の3つの種類があります。

  • Data Cache（データキャッシュ）: サーバーコンポーネントで取得したデータをキャッシュします。
  • Router Cache（ルーターキャッシュ）: ページ全体をキャッシュします。
  • HTTP Cache（HTTPキャッシュ）: ブラウザやCDN（コンテンツデリバリーネットワーク）がリソースをキャッシュします。

それぞれのCachingがどのように機能し、どのように設定すれば良いのかを、順番に見ていきましょう。

3. Data Cache（データキャッシュ）：サーバーコンポーネントの力を最大限に引き出す

Data Cacheは、サーバーコンポーネントで取得したデータをキャッシュする仕組みです。例えば、データベースから取得した商品情報をキャッシュすることで、毎回データベースにアクセスする必要がなくなり、表示速度が向上します。

3.1 Data Cacheの仕組み

Data Cacheは、Next.jsのサーバーコンポーネントがデータを取得する際に自動的に有効になります。つまり、特別な設定をしなくても、サーバーコンポーネントでデータを取得するだけで、Cachingの恩恵を受けられるのです。

async function getData() {
  const res = await fetch('https://example.com/api/products');
  if (!res.ok) {
    throw new Error('データの取得に失敗しました');
  }
  return res.json();
}

export default async function Page() {
  const products = await getData();

  return (
    <ul>
      {products.map((product) => (
        <li key={product.id}>{product.name}</li>
      ))}
    </ul>
  );
}

上記のコードでは、getData関数で商品情報を取得していますが、このデータは自動的にData Cacheに保存されます。次回以降のアクセス時には、データベースにアクセスせずに、キャッシュされたデータが利用されるため、表示速度が向上します。

3.2 Data Cacheの制御：`fetch` APIのオプション

Data Cacheの挙動は、fetch APIのオプションで制御できます。

  • cache: 'force-cache': 常にキャッシュを利用します（デフォルト）。
  • cache: 'no-store': キャッシュを無効にします。
  • revalidate: <seconds>: 指定した秒数ごとにキャッシュを再検証します（Stale-While-Revalidate）。

例えば、常に最新のデータを表示したい場合は、cache: 'no-store'を指定します。

const res = await fetch('https://example.com/api/products', { cache: 'no-store' });

また、Stale-While-Revalidate（SWR）戦略を利用したい場合は、revalidateオプションを指定します。SWRとは、キャッシュされたデータをすぐに表示しつつ、バックグラウンドでデータを再検証する戦略です。これにより、常に最新のデータを表示しながら、高速な表示速度を維持できます。

const res = await fetch('https://example.com/api/products', { revalidate: 10 });

4. Router Cache（ルーターキャッシュ）：ページ全体の高速化

Router Cacheは、ページ全体をキャッシュする仕組みです。一度アクセスしたページは、ブラウザの戻る/進むボタンやrouter.pushなどで再度アクセスした際に、瞬時に表示されます。

4.1 Router Cacheの仕組み

Router Cacheは、Next.jsのApp Router（アプリルーター）で自動的に有効になります。特別な設定は不要で、ページ間の遷移がスムーズになります。

4.2 Router Cacheの注意点

Router Cacheは非常に便利な機能ですが、注意点もあります。それは、クライアントコンポーネントで取得したデータは、Router Cacheの対象外になるということです。

クライアントコンポーネントでデータを取得する場合は、別途Caching戦略を検討する必要があります。例えば、SWRライブラリなどを使用することで、クライアントコンポーネントでも効果的なCachingを実現できます。

5. HTTP Cache（HTTPキャッシュ）：ブラウザとCDNを活用する

HTTP Cacheは、ブラウザやCDNがリソースをキャッシュする仕組みです。画像やCSS、JavaScriptなどの静的リソースをキャッシュすることで、サーバーへの負荷を軽減し、表示速度を向上させます。

5.1 HTTP Cacheの仕組み

HTTP Cacheは、HTTPヘッダーで制御します。Cache-ControlヘッダーやETagヘッダーなどを適切に設定することで、ブラウザやCDNがリソースを効率的にキャッシュできます。

Next.jsでは、next.config.jsでHTTPヘッダーを設定できます。

module.exports = {
  async headers() {
    return [
      {
        source: '/images/:path*',
        headers: [
          {
            key: 'Cache-Control',
            value: 'public, max-age=31536000, immutable',
          },
        ],
      },
    ];
  },
};

上記の例では、/imagesディレクトリ以下の画像に対して、1年間キャッシュする設定をしています。

5.2 CDNの活用

CDN（コンテンツデリバリーネットワーク）は、世界中に分散されたサーバーにコンテンツをキャッシュし、ユーザーに最も近いサーバーからコンテンツを配信するサービスです。CDNを活用することで、Webサイトの表示速度を大幅に向上させることができます。

Next.jsとCDNを組み合わせることで、グローバルに高速なWebサイトを実現できます。

6. まとめ：Next.jsのCaching戦略をマスターしよう

この記事では、Next.jsのCaching戦略について解説しました。最後に、主要なポイントを再確認しましょう。

  • Data Cache: サーバーコンポーネントで取得したデータをキャッシュする。fetch APIのオプションで制御可能。
  • Router Cache: ページ全体をキャッシュする。App Routerで自動的に有効になる。
  • HTTP Cache: ブラウザやCDNがリソースをキャッシュする。HTTPヘッダーで制御する。

これらのCaching戦略を理解し、適切に活用することで、あなたのWebサイトの表示速度を劇的に向上させることができます。

次のステップ:

  • Next.jsの公式ドキュメントでCachingについてさらに詳しく学ぶ: https://nextjs.org/docs/app/building-your-application/caching
  • Vercelなどのホスティングサービスを利用して、CDNを活用する。
  • Webサイトのパフォーマンスを定期的に測定し、Caching戦略を最適化する。

Cachingは、Webサイトのパフォーマンスを向上させるための重要な要素です。この記事が、あなたのWebサイトを高速化する一助となれば幸いです。