Next.js v15で非同期通信を最適化！axiosとfetchのキャッシュ活用法

1. はじめに

Next.jsでAPIを利用する際、毎回サーバーにリクエストを送ると速度が遅くなったり、APIの負荷が増えたりします。
そこで、APIレスポンスをキャッシュすることで、アプリのパフォーマンスを向上させることができます。

この記事では、Next.js v15（App Router対応）で以下のキャッシュ手法を紹介します：

• axios-cache-interceptorを使ったキャッシュ
• fetch関数のキャッシュ
• ISR（Incremental Static Regeneration）をfetch & axiosで実装

2. キャッシュの基本概念

キャッシュとは？

キャッシュとは、一度取得したデータを保存し、再度同じデータが必要なときに素早く取得できる仕組みです。

Next.js v15におけるキャッシュの種類

3. axios-cache-interceptorでキャッシュする

3.1 インストール

まずはaxios-cache-interceptorをインストールします。

npm install axios axios-cache-interceptor

3.2 基本的な使い方

axiosのリクエストをキャッシュするには、setupCache関数を使ってaxiosインスタンスを作成します。

import axios from 'axios';
import { setupCache } from 'axios-cache-interceptor';

// キャッシュ機能付きのaxiosインスタンスを作成
const api = setupCache(axios.create());

async function fetchData() {
 const response = await api.get('/api/data', {
 cache: {
 ttl: 60000, // 60秒間キャッシュ
 },
 });
 console.log(response.data);
}

3.3 キャッシュを無効化する

特定のリクエストだけキャッシュを無効化したい場合は、cache: false を指定します。

await api.get('/api/data', { cache: false });

4. fetch関数でキャッシュする

4.1 fetchのcacheオプション

fetch APIには、cacheオプションを指定することでブラウザキャッシュを利用できます。

async function fetchWithCache(url: string) {
 const response = await fetch(url, {
 cache: 'force-cache', // ブラウザキャッシュを利用
 });
 return response.json();
}

5. Next.js v15（App Router対応）のISRでキャッシュ

Next.js v15では、App Routerがデフォルトとなり、fetch() にnext: { revalidate }を設定することでISR（Incremental Static Regeneration）を利用できます。

5.1 fetchを使ったISR（App Router対応）

App Router (app/ ディレクトリ) を使う場合、fetch() に next.revalidate を指定することでISRを適用できます。

export async function getData() {
 const res = await fetch('https://api.example.com/data', {
 next: { revalidate: 60 }, // 60秒ごとにキャッシュを更新
 });

 return res.json();
}

次に、React Server Component（RSC）でこの関数を利用します。

import { getData } from '@/lib/api';

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

 return (
 <div>
 <h1>APIデータ</h1>
 <pre>{JSON.stringify(data, null, 2)}</pre>
 </div>
 );
}

5.2 axiosを使ったISR（App Router対応）

fetchの代わりにaxiosを使いたい場合、キャッシュを手動で管理する必要があります。
以下の方法で、Next.js v15のISR（Incremental Static Regeneration）をaxiosで実装できます。

📌 ISRでaxiosを使う方法

import axios from 'axios';

export async function getDataWithAxios() {
 const res = await axios.get('https://api.example.com/data');

 return res.data;
}

この関数を revalidate 付きのAPIルートに組み込みます。

import { NextResponse } from 'next/server';
import { getDataWithAxios } from '@/lib/api';

export const revalidate = 60; // 60秒ごとにキャッシュ更新

export async function GET() {
 const data = await getDataWithAxios();
 return NextResponse.json(data);
}

このAPIルートをRSCで呼び出すと、Next.js v15のISRとして機能します。

import { getDataWithAxios } from '@/lib/api';

export default async function Page() {
 const data = await getDataWithAxios();

 return (
 <div>
 <h1>APIデータ（axios）</h1>
 <pre>{JSON.stringify(data, null, 2)}</pre>
 </div>
 );
}

6. まとめ

✅ どの方法を使うべきか？

最後に

Next.js v15でAPIリクエストを効率化するには、用途に応じたキャッシュ方法を適用することが重要です。
パフォーマンス改善に役立ててみてください！