title: Meteor: Lazyload, load after rendering. Best practise
body: <p>i have a Meteor Application which is very "slow" as there are a lot of API-Calls.</p>
  
  <p>What i try to do is to break apart the loading/calls.</p>
  
  <p>What i just did is:</p>
  
  <ul>
  <li>i have loading template via iron-router</li>
  <li>i waitOn for the first API-Call has finished</li>
  <li>then i start the next API-calls in the Template.myTemplate.rendered - function</li>
  </ul>
  
  <p>This was already a big benefit for the speed of my Application, but i want to break it up even more as the second call is in fact more like 5-25 API-calls.</p>
  
  <p>So what i try to do now is inside the rendered function is a self-calling function which calls itself as long as there are no more to do and saves the response inside a session. (Until now it just rewrites, but even to this point i can´t get)</p>
  
  <pre><code>    Template.detail.rendered = function(){
  //comma separated list of numbers for the API-Call
      var cats = $(this.find(".extra")).attr('data-extra').split(',');
      var shop = $(this.find(".extra")).attr('data-shop');
      var counter = 0;
      var callExtras = function(_counter){
          var obj = {
              categories : [cats[_counter]],
              shop  : shop
          };
          if(_counter &lt;= cats.length){
              Meteor.subscribe('extra', obj,function(result){
                  //TODO dickes todo... nochmal nachdenken und recherchieren
                  //console.log(_counter);
                  Session.set('extra',Extra.find('extra').fetch()[0].results);
                  counter++;
                  callExtras(counter);
              });
          }
  
      };
      callExtras(counter);
      Session.set('loading_msg', '' );
  };
  </code></pre>
  
  <p>Now i have again problems with my reactive parts of the app desscribed here - <a href="https://stackoverflow.com/questions/29923423/meteor-iron-router-waiton-without-subscribe">Meteor: iron-router =&gt; waitOn without subscribe</a> As i can´t find a proper way to update my client-side per user base collection. Also in the docs it is described the publish method also creates a new collection. (The new document´s ID) here - <a href="http://docs.meteor.com/#/full/publish_added" rel="nofollow noreferrer">http://docs.meteor.com/#/full/publish_added</a></p>
  
  <p>here is the publish from server</p>
  
  <pre><code>    Meteor.publish('extra', function(obj){
      var that = this;
      Meteor.call('extra', obj, function(error, result){
          if (result){
              //console.log(result);
              that.added("extra", "extra", {results: result});
              //that.changed('extra','extra',{results: result});
              that.ready();
          } else {
              //that.ready();
          }
      });
  });
  </code></pre>
  
  <p><strong>So my question is:</strong> Is there from scratch a better way to structuring my code means solving the problem somehow different? If not how can i achive it the cleanest way? Because for my understanding this is just strange way to do it.</p>
  
  <p>EDIT:</p>
  
  <p>For example.</p>
  
  <p>Can i do a per-user-collection (maybe only client-side like now) and push data from the server and just subscribe to this collection? But then how can i check when the async API-Call has finshed to start the next round. So the view gets data piece by piece. I am just confused right now.</p>