Next.jsを使ったアプリケーション開発では、パフォーマンス向上のためにデータキャッシュ戦略が重要です。この記事では、クライアント側とサーバー側でのキャッシュ戦略について詳しく説明します。また、具体的なコード例を見ていきます。
目次
はじめに
Next.jsは、Reactアプリケーションのサーバーサイドレンダリング (SSR) や静的サイト生成 (SSG) を行うための人気フレームワークです。効果的なデータキャッシュ戦略を適用することで、アプリケーションのパフォーマンスを向上させることができます。
クライアント側のキャッシュ戦略
クライアント側でのキャッシュ戦略として、Next.jsの開発者はSWRを推奨しています。SWRは、HTTPメソッドを使ってデータをフェッチし、キャッシュを管理するためのReactまたはNext.jsのフックです。
SWR
SWRは、データの再検証 (Revalidation) を行うことで、キャッシュデータを最新に保ちます。再検証は、画面遷移や再度訪問した際にも自動的に適用されます。
コード例
以下は、Next.jsでSWRを使用したクライアント側キャッシュのコード例です。
import useSWR from "swr";
const fetcher = (url) => fetch(url).then((res) => res.json());
const Profile = () => {
const { data, error } = useSWR("/api/user", fetcher);
if (error) return <div>Error...</div>;
if (!data) return <div>Loading...</div>;
return (
<div>
<h1>{data.name}</h1>
<p>{data.description}</p>
</div>
);
};
export default Profile;
サーバー側のデータキャッシュ戦略
サーバー側でのキャッシュ戦略の実現には、Next.jsの getServerSideProps 関数を利用できます。また、キャッシュ戦略を効果的に行うためには、HTTPレスポンスヘッダーに cache-control を設定することが重要です。
getServerSideProps
getServerSidePropsは、Next.jsでページをリクエストするたびにサーバー側でデータをフェッチし、プロパティとしてコンポーネントに渡す関数です。
cache-controlヘッダー
cache-controlは、キャッシュの動作を制御するHTTPヘッダーです。max-age、s-maxage、stale-while-revalidateなどのディレクティブを使って、キャッシュの期間や再検証の挙動を定義できます。
コード例
以下は、Next.jsで getServerSideProps を使ったサーバー側キャッシュのコード例です。
import Head from "next/head";
export const getServerSideProps = async (context) => {
const res = await fetch("https://api.example.com/data");
const data = await res.json();
context.res.setHeader(
"Cache-Control",
"public, s-maxage=10, stale-while-revalidate=59"
);
return {
props: { data },
};
};
export default function Page({ data }) {
return (
<>
<Head>
<title>サンプル</title>
</Head>
<h1>Data</h1>
<pre>{JSON.stringify(data, null, 2)}</pre>
</>
);
}
まとめ
この記事では、Next.jsのデータキャッシュ戦略について、クライアント側とサーバー側の両方のアプローチを説明しました。SWRと getServerSideProps を利用することで、効果的なキャッシュ戦略を実現できます。パフォーマンス向上のために、適切なキャッシュ戦略を選択しましょう。
