ページネーション とは？

そのとおり！Google検索の下に出るページ番号が一番有名な例だね。大量の情報を小分けにして、ユーザーが自分のペースで見られるようにする仕組みだよ

楽に感じるけど、「さっき見たあの商品、何ページ目だっけ？」って探せなくなるでしょ？ページネーションなら「3ページ目にあった」って覚えられるし、URLで共有もできるんだよ

そうだよ。ページネーションは各ページにURLがあるから検索エンジンがクロールしやすいんだ。rel="next"やrel="prev"でページ間の関係を伝えると、さらに効果的だよ

全ページ番号を表示するんじゃなくて「1 2 3 ... 98 99 100」みたいに省略表示するのが定番だよ。あとAPIの設計では「オフセットベース」と「カーソルベース」の2方式があって、データが頻繁に追加される場合はカーソルベースのほうが安定するんだ

オフセット型は「50件目から10件取得」というSQLの LIMIT 10 OFFSET 50 という形式だよ。シンプルで実装しやすいけど、ページをめくる間に新しいデータが追加されると「同じ件が2回出る」「抜けが生じる」問題が起きやすいんだ。カーソル型は「このIDより後の10件」という方式で、データが変動しても安定しているよ。

なるよ。OFFSET 10000 みたいに大きな値になると、データベースは読み飛ばすために先頭から10000件を全部スキャンする必要があるんだ。これを「OFFSET N問題」と呼ぶよ。100万件のテーブルで後ろのページを表示するとクエリが極端に遅くなる。カーソル型やインデックスの工夫で対策するんだ。

ユーザーが「特定のアイテムを探す」用途なら番号付きページネーションが向いているよ。Twitterのタイムラインや音楽プレイリストのように「流し読みしていく」コンテンツには無限スクロールが合う。ECサイトの商品一覧は「何ページ目に戻りたい」ニーズがあるからページネーション向きなんだ。

Googleは2019年にrel=prev/nextのサポートを公式に終了したんだ。ただし今でもページ間の関係を示す意味で使っているサイトは多いよ。重要なのはcanonicalの設定で、ページネーションの各ページを独立ページとして扱うか、1ページ目にcanonicalを向けるかはサイトの方針次第。検索エンジンは自力でページ間の関係を理解するようになってきているよ。

よくある課題だよ。対策はいくつかあって、「前へ／次へ」ボタンだけにシンプル化する・現在ページと前後1〜2ページだけ表示する・スマホではLoad Moreボタンに切り替えるという方法がある。Googleも小さい画面でのページネーションUXについてのガイドを出しているよ。

似ているけど別物だよ。無限スクロールはスクロールするだけで自動的に次のデータが読み込まれる。Load Moreボタンはユーザーが明示的にボタンを押したときだけ追加読み込みされるんだ。フッターにアクセスしたい・読み込みタイミングをコントロールしたいというユーザーニーズに応えられるから、ECサイトでよく採用されているよ。

Next.jsではURLのクエリパラメータ（?page=2）をApp RouterのsearchParamsで受け取って、サーバーサイドでデータを取得するパターンが主流だよ。React Queryを使う場合はuseInfiniteQueryでカーソル型の無限スクロールを実装することも多い。Suspenseと組み合わせてローディング状態を管理するのが現代的な書き方だね。

違うよ。ECサイトはフィルタや並び替えと組み合わせることが多くて、ページをまたいだ「カート維持」「比較リスト」との整合性も考える必要があるんだ。一方、検索結果は「ユーザーが求める答えが何ページ目にあるか」という体験が最優先で、2〜3ページ目以降は大幅にクリック率が落ちるから最初のページに品質の高い結果を集めることが重要なんだよ。

レスポンスに次ページへのカーソルやtotal_countを含めるのが定番だよ。total_countは大きなテーブルだと COUNT(*) が重くなるから、概算値を返すケースもある。またページサイズ（per_page）の上限を設けないと「10000件一気に取得」というリクエストが来てサーバーが落ちることがあるから、最大値の設定も忘れずにね。