microCMSにおける絞り込み（filters）を使うときに気をつけたい「limit」の落とし穴

ブログやニュースサイトなどで、記事一覧ページをカテゴリごとに分けて表示するケースは多いですよね。たとえば、/category/business のようなURLで、そのカテゴリに属する記事を一覧表示する、といった実装です。

今回は getStaticPaths などでフィルターを使って記事を取得する際に注意したいポイント として、limit パラメータにまつわる思わぬ落とし穴について解説します。

まずは基本的な実装イメージ

たとえば、MicroCMSなどのヘッドレスCMSを使っていて、特定のカテゴリ（たとえば "works"）に属する記事だけを取得し、ページネーションしたいとします。以下のようなコードを書くことが多いでしょう。

export async function getStaticPaths({ paginate }) {
  const response = await getNews({
    filters: "works[equals]type1",
    orders: "-publishedAt",
    limit: 100,
  });
  return paginate(response.contents, { pageSize: 10 });
}

このコードでは filters でカテゴリを絞り込み、limit を指定して最大100件までの記事を取得し、それを10件ごとにページ分割しています。

一見すると問題なさそうに見えますが、ここで limit を省略した場合に注意が必要です。

limit を省略するとフィルターが効かない!?

たとえば limit を指定し忘れてしまうと、一部のAPIラッパーやfetch関数（たとえば fetchAllNews() など）は、内部的に limit を無制限にして全件取得しようとしたり、フィルターを無視して全件取得する実装になっていることがあります。

その結果、カテゴリーページの生成処理で本来絞り込まれるべき記事とは関係ない全データを取得してしまい、ビルド時間が大幅に伸びたり、場合によってはCMSのAPIリクエスト制限を超えてしまうリスクもあります。

対策：明示的に limit を指定しよう

このような事態を避けるには、必ず明示的に limit を指定することが大切です。取得したい最大件数を意識的に設定しておくと安全です。

おわりに

カテゴリーページやタグページなど、記事をフィルターして取得する処理の参考にして下さい。