APIでJSONやXHRを取得する際に、一部だけ欲しい

Question

JavaScript からAP Iにリクエストを投げて、
JSONやXHRといったデータを取得して、表示させているアプリがあります。

データ量が多いので、オブジェクト10個だけ取得して、
例えばスクロールしたらまた次の10個取得して、
といったことがしたいのですが、

その際にはAPIの設計からやり直しですか?

問題はデータを読み込む時間がかかってしまっていることです。(TTFB？waiting?)

リクエストを投げた際には、その返答の全量を受け取ってしまうものですよね…？
APIを触らずにちょっとずつ受け取るなんてことはできないですか？

Answer 1

考え方は２つ

• 最初にどかっと読んでおいてあとはそのデータを使い回す
• APIを特定の部分だけデータを吐くように作り直す

Comments

[Yusuke_m25]

ありがとうございます。
最初にどかっと読んだ場合、基本的には（Ajax やaxiosでキャッシュを残さない設定をしていない限り）そのデータはキャッシュに残って、以後の読み込みでは超速で表示されるのでしょうか？
どかっと読み込むという意味では、現状クリックのたびにどかっと読んでいるようなものです。
なのですが、各クリック（api1にリクエスト、api2にリクエスト）のたびに、TTFBが発生しています！

[yambejp]

キャッシュと言うか変数で受けますよね？

apiから戻されるデータにリアルタイム性が必要でなければ
（都度同じデータがよびだされるなら）
とにかく非同期で一回読むだけで十分だと思います

[Yusuke_m25]

データ表示のボタンをクリックしたときに、
変数を見に行って、
変数が空であればAPI通信をして変数に格納

変数に値が入っていればその値を使う

という処理にすればいいのですね！確かに！

この場合はブラウザをリロードした時は変数の中身が消えて、
その後データ表示のボタンをクリックした際にはまたAPIにデータを取りに行きますか?

[yambejp]

> ブラウザをリロードした時は変数の中身が消えて

まぁリロードはそういうものですからね
localstorageとかに保持する手もあると思うので
データの保持は不可能では無いと思いますが
データを保持するということは再読み込みしたいときになにか
強制的な処理が必要になります