title: What is best way to do lazy loading in a Next js Application?
body: <p>I checked the documentation about Lazy Loading components on the official next js docs page (<a href="https://nextjs.org/learn/excel/lazy-loading-components" rel="nofollow noreferrer">https://nextjs.org/learn/excel/lazy-loading-components</a>).
  I tried the steps mentioned and it did not work for me. Below is the piece of code that I want to lazy-load:</p>
  
  <pre><code>&lt;div id="cards" className={index.sectionCards} style={{paddingBottom: '0px'}}&gt;
      &lt;div className="title" style={{marginBottom: "0px", paddingBottom: "0px"}}&gt;
          Take a Look at Our Exciting Range of Cards
      &lt;/div&gt;
      {this.renderCards()}
      &lt;div&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here the renderCards function makes a call to a backend API and gets images from AWS S3, this whole process takes a lot of time and hence increases the overall page load time, below is the code for the function renderCards:</p>
  
  <pre><code>renderCards() {
  
      const keys = Object.keys(this.state.products);
      const valid_keys = ['Specials', 'New Beginnings', 'Expressions', 'Celebrations' ];
      if(keys.length == 0) return &lt;div&gt;&lt;/div&gt;
      return (&lt;div className={index.cards}&gt;
                  {
                      keys.map((key) =&gt; {
                          if(valid_keys.indexOf(key) &gt; -1) return &lt;div style={{ width: '80%', margin: '0 auto' }}&gt;
                              &lt;div className={index.category}&gt;{key}&lt;/div&gt;
                              &lt;div style={{ display: 'flex', overflow: 'scroll' }} &gt;
                                  {this.state.products[key].map((c) =&gt; {
                                      if(c.status == 'PRODUCT_ACTIVE') {
                                          return &lt;img onClick={() =&gt; this.onClickProduct(c)} className={index.cardImage} src={`&lt;backend URL here&gt;`} /&gt;
                                      }
                                  })}
                              &lt;/div&gt;
                          &lt;/div&gt;
                      })
                  }
              &lt;/div&gt;)
  }
  </code></pre>
  
  <p>The objective was to lazy load this component to improve the overall page speed.</p>
  
  <p>If anyone knows a way to solve this problem, please share.</p>