
firebase(firestore)でページネーション作る方法 React を使った無限スクロールの解説 [Next.js]
firebase(firestore)でページネーション作る方法を解説します。
ページネーションは、「進む」と「戻る」ボタンがあるものですが、
今回の解説は、主に無限スクロールをするやり方です。
「さらに記事をロードする」みたいなボタンを押すと、10記事追加で出現するタイプです。
「戻る」「進む」ボタンよりも無限スクロールの方がシンプルかつ簡単なので、
多分プロジェクトで選択の余地が許されてるなら、僕は無限スクロールを常に選ぶと思います。
ユーザーにとっても、「戻る」「進む」ボタンより無限スクロールの方UX楽だと思うので。
それに仕組みだけ分かれば、結構容易いと思う。シンプルに外部ライブラリとか不必要かと思います。
デザインを簡単に作りたければ、何か使ってもいいのかも?でも僕は外部のnpmのパッケージとかは使っていません。
ちなみに僕のプロジェクトでは、Next.jsですが、普通にReactと考えてもらえれば。
ページネーション(無限スクロール)の仕組み
無限スクロールの仕組みは結構簡単です。
初期ロードでLimitを使って10件だけ取得して、ボタン押すと10件+5件を取得してくればいいだけ。
もう一回ボタン押すと、15件+5件を取得してくればいいだけです。
コードで言うと、初期ロードのところで、下記のようにデータベースから値を取得します。
これでpostコレクションから5件だけデータを取得できます。
ここで取得してきたのが初期データとして表示される。
それで、フロント側のリストの一番下に、「さらに記事をロードする」みたいなボタンを作ります。
例えばこんな感じで?
それを押すと、updatePost()関数が発火する。その中には、
こんな感じでコードが実行されている。setPageはuseStateを使っています。
それで、現状のデータ取得数に+5をして、setPostsでデータを取ってきた配列を再びセットする。
これをすることで、.limit(page) の部分は、常に現状のデータの数+5件という記述になっているので、
データが正確に、必要な分だけ、追加で取得される感じになります。
で、そのuseStateの部分と、データ更新の部分などをになっているのが、最初の変数定義のところ。上記を見てみてください。
まあ、この書き方は若干微妙かもだけど。setPostsが実行されると、postsが再描画されてブラウザに変化をもたらす。
つまり、データが増える。setPageの分だけデータを取得できる。
まあ、こんな感じですね。