Optimization is everything around us, be it technology or real-life challenges. If things are optimized, it makes life simpler, and in web development, it keeps things performant and scalable.
While there are many different types of optimizations, depending upon the area and interest of the application, what we are specifically going to discuss here is lazy loading of the data.
As the term states, lazy-loading means loading a chunk of data at a time rather than in bulk.
This is an effective technique utilized to optimize the application with limited internet coverage to request limited data that can be served faster with limited bandwidth, and the client device with limited processing capacity can render the smaller list faster.
There are many areas for lazy loading of the data over the network, but here we are specifically talking about the database or stored records.
And the first thing that comes to mind when we have to lazy-load the stored records is that we should paginate things.
Pagination is a technique of loading the data in batches, deciding the start point and the limit after that.
page: 1, limit = 10;
In the pagination as well, we have two ways to paginate: one is page-based, where we navigate to the new page, which will pull the decided limit of records and show them.
And second is the infinite scroll, where the new data is lazy-loaded as the user scrolls through the existing records.
In the presentation, there are two types, and it is important to understand both for the frontend system design.
Both are utilized effectively, depending on the nature of the application we are creating.
Offset-based pagination is a widely used technique adopted by blogs, e-commerce sites, or websites that have defined sets of records that won't often be updated.
In this request to the server, the current page and the number of records to be pulled are passed.
learnersbucket.com?q=frontend+system+design&perPage=20&page=3
For example. Page = 3, count = 20.
This will skip the first 40 records, that is, 20 records of page 1 and 20 records of page 2, and will return the 20 records after that.