Is there a way to lazy load AEM component?

[sofi2406]

Hi,

I have a reviews and rating component that needs to be added at the bottom of the page. It gets its data from MySQL DB. I want to know is there a way to lazy load this whole component so that it doesnt impact page load speed? 

I am using sightly to query db for fetching all the desired details about existing reviews and calculating average page rating

[BrianKasingli · Accepted solution]

@sofi2406,

Any AEM components can have the lazy load behavior, but it must work in parallel with Javascript. 

This seems like a custom ratings-component that is not related to the AEM WCM Core components.

My approach:
Assuming that SEO is not required, I will create Javascript business logic that detects the user scrolling is at the bottom of the page; once at the bottom of the page, I will make my api call, api.ratings/customerbox/1 (you should be able to see the first 10 ratings & the HTML will be rendered). Within the same ratings component, you should be seeing a "see more comments" button, where when you click on "see more comments", then the next api.ratings/customerbox/2 will be called. 

Assuming that this is some kind of product review page, the component will be baked into the page template (component inside the structure for editable templates) itself . 

I hope this helps,
Brian.

[Umesh_Thakur]

One more approach will be, on component load itself load the entire data from the database and then load first 30 or 50 data in first load then one page scroll load next 30 or 50 data and so on.

This way you will be saving some extra api call to the back-end.

You can take advantage of pagination as well to load subsequent data on the page.

Hope this will help.

Umesh Thakur

[Bimmi_Soi]

Hi @sofi2406 ,

You can make use of pagination to display the results. When we use pagination then only that set of data gets loaded on the page load and it decreases the page load time. 

This way you can lazy load this component.

You can check below url

https://aem4beginner.blogspot.com/sightly-pagination-component-using

Hope this helps!!!

Thanks