Let's say I want to lazy load comments on a blog, such that only the 10 newest ones are shown initially, and the next batch of 10 is lazy loaded on scroll.
Option A: send the entire array of results from the server on page load, and handle rendering 10 at a time client side.
Option B: load 10 on page load and send ajax requests for 10 more as needed.
Suppose the number of objects can reach 40,000 - is it ok to send such a large json array to the client on page load?
I see the trade-offs as: with Option A, you minimize trips to the database, but you send potentially too much data to the client (a 40,000 record json array ≅ 7mb), which is not ideal for mobile users. With option B, you may have too many trips to the database.
Is there a best practice on this? Maybe compromise somewhere in the middle? That is, eager load 200 objects to the client, only rendering 10 initially and rendering 10 more until then 200 objects are used up, and then lazy load from the server as needed? Wanted to see how others are addressing this.
I would go exactly as you suggested with small amortisation improvement.
First you pre-load 200 items and render them in groups of 10. When half of the loaded commends read you pre-load next 200.
Depending on your task you can go even further and dynamically calculate size of the next comments batch. If user is a slow reader, you decrease batch size to 100. If they scroll fast, batch increased to 1000.