10. SQLで賢いページングを実装しよう

やること1. サーバーアクションを使ってページングを実装しよう

これまではページングを実装するために、データベースから全ての商品を取得していました。しかし、これではページングが遅くなってしまいます。

SQLでページングを実装して効率のよいページングを実現してみましょう。

サーバーアクションで下記のような関数を定義したら、ページングができそうです。

async function getItemsByPage(
  itemsPerPage: number
): Promise<{
  items: Item[];
  isLastPage: boolean;
 }>

SQLでOFFSETを使うと、指定した数だけデータをスキップして取得することができます。最後のページかどうかは、LIMITとOFFSETを使って判断できそうですね。

SELECT * FROM items ORDER BY id ASC LIMIT ? OFFSET ?

動作確認のために一ページあたりの商品数を変更したくなるかもしれません。per_pageというクエリパラメータを追加することで、一ページあたりの商品数を変更することができます。

const perPage = parseInt(searchParams.get("per_page") || "10");