SFDC Lightning Best Practice:How to avoid multiple server calls in LightningComponents(Aura/LWC)

Today we will learn how to avoid multiple server calls(Calling Apex Controller) in Lightning Components(Aura and LWC).
In general we will get requirements like when component gets loaded/on click of button  we need to fetch some different types of data like List of Strings,String,Integer or List of records for different types of objects.
In this case we use to have different methods in Apex Class to get different type of data,this leads to multiple server calls which leads to performance issue.
                                          Is there a way to avoid this??
                                                             Yes!!!!

WRAPPER CLASS 
We all know what is wrapper class,we declare this in Apex class to handle different types of data.We can use same process for Lightning Components also.

Yes!! Lightning Components(both Aura and LWC) supports Wrapper class methods to feth data.Using wrapper class in controller we can avoid multiple server calls.

Let's see how we can use Wrapper class in Lightning Components:   

Requirement:

We need to get List of Contacts ,List of Accounts and Login User ID when component loads and show it in UI.

In Apex Controller define the Wrapper class like below and add all the data to the wrapper class.

Apex Controller: getDetailsOnLoad.apxc   
LightningComponent: displayDifferentTypesOfData.cmp  ,displayDifferentTypesOfData.js 
Yeah!! without calling server multiple times when component loaded we fetched different types of data using single server call.

We can use Wrapper class in Lightning Web Components also.Here I have used wire method to call the server.

   Happy Learning!!!!!


 Check this to know about LWC Local Developement: LWC Local Development Installation Guide