はじめに

microCMSのJavaScript SDKであるmicrocms-js-sdkのv2.5.0をリリースしました。

Releases · microcmsio/microcms-js-sdk

v2.5.0ではcustomRequestInitとしてfetchへリクエストオプションを追加できるようになりました。
Next.jsのApp Routerで利用されるfetchのcacheオプションを付与することも可能になっています。

従来のバージョンまではjs-sdkを利用せずに独自にfetchを利用いただくか、以下のようにページごとのキャッシュをコントロールするsegment configurationを利用する必要がありました。

export const revalidate = 3600; // revalidate every hour

Building Your Application: Data Fetching | Next.js

今回のアップデートでリクエストごとのキャッシュコントロールが可能になっています。
なお、利用できるオプションについてはNext.jsのドキュメントを参照ください。

Functions: fetch | Next.js

Next.js App Routerでの実装例

// app/page.tsx
import { createClient } from "microcms-js-sdk";

async function getContents() {
 const client = createClient({
  serviceDomain: process.env.MICROCMS_SERVICE_DOMAIN,
  apiKey: process.env.MICROCMS_API_KEY,
 });

 const response = await client.getList({
  customRequestInit: {
   cache: "no-store", // キャッシュを利用せずに常に新しいデータを取得する
  },
  endpoint: "endpoint",
 });

 return response.contents;
}

export default async function Home() {
 const contents = await getContents();
 return (
  <ul>
   {contents.map((item) => {
    return <li key={item.id}>{item.title}</li>;
   })}
  </ul>
 );
}

AbortController

また、AbortControllerも利用が可能です。利用頻度は少ないかもしれませんがリクエストを厳格に制御されたい場合などにご活用ください。

const controller = new AbortController()
const response = await client.getObject({
 customRequestInit: {
  signal: controller.signal
 },
 endpoint: "endpoint",
});

setTimeout(() => {
 controller.abort()
}, 1000)

@amotarao さん、Pull Requestありがとうございました👍

おわりに

今回の仕様追加に関して、フィードバックがございましたら、microCMSユーザーコミュニティ（Discord）や画面右下のチャット欄よりお気軽にご連絡ください！