Server-side lazy loading vs. Client-side lazy loading

Question

I've been doing some research about infinite scrolling and came across what people call "Lazy Loading". Now I have done it on one of my website elements (chatbox), and now I have 2 ways to do it. but I can't decide which one is more efficient than the other. Here are my ways:

Let's say I have 1,000,000 rows of data from database which I need to fetch all

1st way:
Load content from database, truncate it on the server-side code(PHP) then only show the first 50. Upon user scroll on the page, another request will be sent to fetch the results again and display the next 50 and so on and so forth..

2nd way:
Load content from database, render it in my HTML as hidden elements but only displaying the first 50, then upon user scroll, show 50 more hidden elements.

The 1st way is requesting from the server whenever the need to display more results arises. The 2nd way just does 1 request from the server, then hides the result except for the first few that should be shown.

I have no problem doing either of the two. Now the dilemma, is that the 1st way is sending more HTTP requests, and the 2nd way (though sending only 1 HTTP request) is fetching huge data in a single request, which can be slow.

Which method is "better", and if there are other options, please let me know.

I think first option looks better unless your not truncating fetched records I guess you will need that later — shashi
– shashi, Commented Oct 6, 2017 at 3:25
Similar to stackoverflow.com/questions/46603653/mysqli-php-ajax-pagination Use LIMIT in your SELECT statement to return the number of results (here you mention 50). When your user wants the next 50 records, do an AJAX call to get only these next 50. Do not get 1X10^6 results all loaded up at once. Your 2 ways get the entire result set. Get only what you need. — Nic3500
– Nic3500, Commented Oct 6, 2017 at 11:24
Nic, you have a point. I will do that. I guess then the 1st way + SQL Limit is the way to go — Seighth Hellsing
– Seighth Hellsing, Commented Oct 8, 2017 at 10:52

Goca · Accepted Answer · 2019-12-13 17:34:12Z

I know this is old question but want to give my opinion:

1st way

Is always preferred specially with that amount of rows, it is much more efficient to only request a set number of rows and if user wants to see more e.g click in next page another request is made to the server to fetch the next page, the response time will be much better, it will also make it easier to the client to manipulate the list if there is other processing that needs to be done before is returned to the user. You also need to make sure that you are applying the limits in your DB query otherwise you will be loading all the objects into memory which is not efficient.

2nd way

If you fetch 1,000,000 rows at once the user will have to wait until the response comes back which can result in a bad user experience also as the number of rows returned keeps growing the response time will keep increasing and you can hit a time-out eventually, also consider that you will be loading all those objects into memory in your server before is returned. The only use case I see for this approach is if you have a list that doesn't grow over time or that you have a set number of items that doesn't affect response time.

Collectives™ on Stack Overflow

Server-side lazy loading vs. Client-side lazy loading

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related