What are frontend/backend good practices to explore server response with a large list of items?

Viewed 35

I wonder what are good practices to explore server response with a large list of items. The client would send a search request to the server. The server would find thousands of matching items (sorted or not). For example, these items could be ads: text (potentially long) + images, with a preview in the item list and the actual item information when we click on one item (say an amazon like search project).

What are good practices about returning (server side) and browsing/loading (client side) these items (organized into pages)?

  • server side: should I return a list of items first then "full" items next? Should I return a long list of all items? partial lists (how can I efficiently implement this)?
  • client side: How can I compute the number of pages in advance (do I then need the full list of items?)? when should I query item information? should I query information of items on the next page in advance as a preloading? should I wait? Is it good idea to preload many pages? When should I stop?

Note that I have some ideas about it, like lazy load images when they appear on the screen, but I still would like some advice to organize/browse/load items into pages. I am also aware that there is not an universal answer and that this depends on the project, but this is kind of well know use case and I sure you will have many ideas.

Even if my question is more about general good practices, if it can help to illustrate your discussion, I want to implement such data browsing using vue.js and PHP.

Thank you very much.

1 Answers

A common approach is to use paging i.e. a client sends a request with a page number and a number of items per a page. In return it gets a requested chunk of items along with total count of items.

Request:

https://www.sample.com/items?page=1&count=50

Response:

{
  items: [<up to 50 items here>],
  count: 2400
}
Related