TIL-React Pagination

勉強前:Paginationはフロントで実現するだけです!

学習後:Paginationはフロントエンドとバックエンドの両方で実現すべきである。

フロントエンドでは、
バックエンドに伝えるから.

ここで待って!

LimitとOffsetはどんな概念ですか?

Limit(=page size):ページあたりのデータ数
page number : 1

Offset:データがどこから始まるか(index)
<勘違いのポイント!>データは配列からなり、いつもゼロから始まることを忘れないでください.

Offset === index

1.ページ名とは？

インターネットのニュースサイトには、これまでに蓄積された文章がたくさんあります.
しかし,(1)ニュースページに登録するたびに,(2)これまで蓄積してきたすべての記事を一度にダウンロードするとどうなるのでしょうか.
もしかすると、オンラインになるたびに数時間待つか、オンラインにならないことが多いかもしれません.
そのため、ニュースサイトはこのような不便を減らすために、少しずつ報道を受信し、ユーザーに展示している.

つまり、いわゆるページネーミングです。

レンダリングに必要なデータのみを受信します.
この場合、より多くの情報を表示する場合は、「≪詳細を表示|View More|emdw≫」ボタンまたはスクロールして追加のデータを取得できます.
このようにデータを少しずつ分けてインポートすることをページングといいます.

2.ページ名の種類

1）オフセットベースのページnation

オフセット(Offset)
相殺
簡単に言えば、これまでに受信したデータの個数である.
例えば
これまで受け取った20件の記事がOffsetであれば、サーバに10件のデータを送信するように要求するのはオフセットベースのページ名です.
上図のように、

offset=20 이 지금까지  받아온 데이터 개수이고,
limit=10 서버로부터 요청한 더 받아올 데이터의 개수이다.

クライアントがoffset=20&limit=10を要求した場合、
サーバはResponeにデータを送信します.

<待って!!>現在はクライアント上でのリクエスト操作のみを学習しているため、下図のようにResponeの構成程度のみを理解している。

1）オフセットベースのページナビゲーションに問題がある：繰り返し取得

オフセットベースで、個数に応じてデータを分割します.

たとえば、
すべてのデータ:データ1～30
受信したデータ:受信したデータは1日から20日まで、
受信するデータ:受信するデータは21日から30日までです.

しかし、新しいデータを追加すると?

ニュース記事を読む過程で新しい記事が追加されると言ったら、
Resqset(offset=20&limit=10)を送信したらどうなりますか?
サーバからデータを受信すると、オフセット量=20&制限=10になります.
21日から30日までデータを受信しなければ、予定通りニュースを調べることができません.
ただし、オフセットベースのページnationは、データの数に応じてデータを受信する.
新しく追加されたデートのため、20日から29日までデータが届きます.
つまり,20回のデータを繰り返し受信するという問題があった.

既存のデータを削除しても、同様の問題があります。

の当初の意図は、21日から30日までデータを追加受信する必要があることです.
既存データの削除に伴い、22日から20日までデータを受信します.
これにより21番のデータを受信できないという問題が発生した.
オフセットベースのページ命名法に存在する問題(重複データと漏れデータ)を補うために現れる技術は、カーソルベースのページ命名法である.

2）カーソルベースのページ名

カーソル(Cursor)
=データへの値
簡単に言えば、受け取ったデータをブックマークとして表すことができます.
例えば、クライアントがサーバに1つの要求を送信し、要求が10個のデータのみを送信する場合、
サーバは応答にデータとページ名情報を送信します.
ページ名情報には、次のカーソル値も含まれます.

Response
{
	"paging":{
    	"count": 30,
        "nextCursor": "WerZxc" // 다음 커서 값!!!
    },
    "posts": [...]
}

サーバからページ名情報を渡すと、次のページへのロードから、一緒に受信したカーソル値にリクエストが送信されます.
すなわち、受信したカーソルに従ってサーバにデータが要求される.

2 1)カーソル(nextCursor):オフセットベースのトラブルシューティング

したがって、カーソルを使用すると、
ニュース記事を読むときに新しい記事を追加すると、カーソルの値も変わりません.
(なぜですか?応答オブジェクトとして渡されるページ名情報にはnextCursorが存在するためです.)
したがって、は、オフセットベースの
これにより、重複や欠落がない場合にデータをインポートできます.

2)カーソルベースのページナビゲーションの欠点

カーソルベースはオフセットベースの問題を補い、これは大きな利点であり、大きな欠点でもある.
サーバにとって、カーソルベースの実装は、オフセットベースの実装よりも困難である.
なぜなら、データが頻繁に変更されていない場合、オフセットベースのデータで十分であるからです.

3.整理

ページ名(Pagination)

オフセットベース=入力ベースの数
カーソルベース=データを指すカーソルベース

終了後..。

今日はページネーミングの概念を整理しました
週末の間、オフセットとカーソルに基づく追加のデータ受信練習を行います.
注意:コード接点反応処理データ−2を用いてデータ−09を導入した。page nationとは?