Next.jsでaxios-cache-adapterを使って特定のAPIアクセスをキャッシュする方法

Web 開発において、API の使用はほぼ避けられません。しかし、API を使うにはコストがかかることもあり、同じリクエストを何度も繰り返すのは効率的ではありません。そこで役立つのがaxios-cache-adapterです。本記事では、Next.js でaxios-cache-adapterを使って特定の API アクセスをキャッシュする方法について解説します。

axios-cache-adapter とは

axios-cache-adapterは、axiosインスタンスのレスポンスをキャッシュするためのライブラリです。これにより、一度取得した API のレスポンスを再利用することができ、無駄な API リクエストを削減することが可能になります。便利な点として、axios-cache-adapterはサーバーサイドでも利用できる点です。つまり、Next.js のようなサーバーサイドレンダリング（SSR）を行うフレームワークでも利用可能で、API のレスポンスを効率よく取り扱うことが可能です。デフォルトでは、フロントエンド側のサーバーのメモリにキャッシュが保存されます。

axios-cache-adapter の使い方

まず、yarnを使ってaxios-cache-adapterとaxiosをインストールします。

yarn add axios axios-cache-adapter

次に、axios-cache-adapterをaxiosインスタンス作成時に設定します。以下の例では、axiosのインスタンスを作成し、そのadapterプロパティにaxios-cache-adapterを指定しています。

import axios from 'axios'
import { setup } from 'axios-cache-adapter'

// Create axios instance with pre-configured axios-cache-adapter
const api = setup({
  maxAge: 15 * 60 * 1000, // 15 minutes
})

上記の設定で、API のレスポンスは 15 分間キャッシュされます。

特定のエンドポイントのみキャッシュさせる方法

特定のエンドポイントのみキャッシュさせたい場合、ignoreCacheオプションを使うことで実装可能です。

例えば、以下のようにデフォルトではignoreCacheを true にしてキャッシュさせないようにしておきます。

const api = setup({
  maxAge: 15 * 60 * 1000, // 15 minutes
  ignoreCache: true,
})

そして API リクエスト時に axios config で ignoreCache:false とすることでキャッシュが動作するようになります。

await axiosInstance.get('https://jsonplaceholder.typicode.com/posts', {
  cache: { ignoreCache: false },
})

このようにキャッシュしたいリクエストとそうでない場合を柔軟に使い分けることが可能です。

まとめ

Next.js を使ったアプリケーション開発において、axios-cache-adapterは API のレスポンスを効率的に扱えて非常に便利です。同じ API へのリクエストが頻発する場合や、レスポンスの内容が毎回ほぼ変わらない場合には、axios-cache-adapterの利用を検討するのが良いでしょう。

キャッシュするエンドポイントを特定することも可能で、全ての API リクエストをキャッシュするのではなく、必要な部分だけを効率的にキャッシュすることが可能です。