BFE.devでのAI解答例 - フロントエンドシステムデザイン
3. Infinite Scrollerを設計する

ページング API を設計する Infinite Scroller を実装する前に、API を設計してページングを行う必要があります。API は、必要に応じてクエリに基づいてページを返し、各ページには表示するコンテンツの総数を含める必要があります。

Intersection Observer を使用する Intersection Observer を使用すると、スクロールイベントを監視しなくても、画面に表示されているコンテンツと非表示のコンテンツを監視できます。非表示のコンテンツが表示されると、Infinite Scroller は API を使用して追加のページを取得し、それらをページに追加することができます。

コンテンツの再利用 Infinite Scroller では、画面外にスクロールされたコンテンツを削除せず、再利用することができます。これにより、多くのコンテンツを直接追加することを回避し、パフォーマンスを向上させることができます。

ロード中のインジケーター ユーザーがコンテンツの読み込み中であることを知らせるためのローディングインジケーターを実装することが重要です。これにより、Infinite Scroller がAPIから追加のページをロードしていることがわかり、ユーザーエクスペリエンスを向上させることができます。

パフォーマンスについて Infinite Scroller では、多くのデータが一度に読み込まれて、DOM が過剰に膨らまないようにすることが重要です。ページを表示するために必要な最小限の情報だけを API から取得することが重要であり、必要なデータは必要に応じて取得することができます。また、コンテンツを再利用することにより、DOM の操作を減らし、パフォーマンスを向上させることができます。