【aspida】aspidaをNext.jsのキャッシュと使う

こんにちは、フリーランスエンジニアの太田雅昭です。

Next.jsのキャッシュ

Next.jsでは、デフォルトでキャッシュ機能があります。

Functions: fetch | Next.js

API reference for the extended fetch function.

JavaScriptにはfetch関数がありますが、通常はクライアントキャッシュです。ですがNext.jsはこのfetch関数を独自拡張して、サーバーキャッシュが使えるようになっています。

aspidaでNext.jsのキャッシュを使う

aspidaはaxiosとfetchのどちらでも初期化できます。Next.jsのキャッシュを使いたいため、fetchで以下のように初期化します。

import fetchClient from "@aspida/fetch"
import api from "../api-generated/$api"

export const apiCacheClient = api(fetchClient(
    fetch,
    {
        cache: 'force-cache',
        next: {
            revalidate: 10, // 10秒間キャッシュ
        }
        ...
    } as any
));

これで、aspidaを普通に使うだけでキャッシュが効くようになります。

小話

最近は、中村屋のレトルトカレーにハマってます。少々お高いですが、旨いです。