title: Client-side JS takes longer for server requests
body: <p>I am populating data on a page after a user logs in.  Without any client-side JS, this happens instantly since the server is sending data back with the response.  The corresponding HTML is just a simple handlebars file.</p>
  
  <p>Server-side index.js:</p>
  
  <pre><code>/* GET root page. */
  router.get('/', function(req, res, next) {
    if(req.isAuthenticated()){
      return res.redirect('/home');
      next();
    } else {
      res.redirect('/login')
    }
  });
  
  // GET home page.
  router.get('/home', ensureAuthenticated, (req, res, next) =&gt; {
    User.find({ gender: 'female'}, (err, all) =&gt; {
      res.render('home', {
        all: all
      })
    })
  })
  </code></pre>
  
  <p>When using client-side JS, it takes longer to load the data (about a fraction of a second).  I think it's because the client must make another trip to the server after the page is rendered.</p>
  
  <p>Client-side <code>home.js</code>:</p>
  
  <pre><code>window.addEventListener('load', () =&gt; {
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
      if (this.readyState == 4 &amp;&amp; this.status == 200) {
        var response = JSON.parse(this.responseText);
        if (window.location.pathname === '/home') {
          document.getElementById('all-members').innerHTML = output;
        }
      }
    }
    xhr.open('GET', '/home_test', true)
    xhr.send()
  })
  </code></pre>
  
  <p>Server-side index.js:</p>
  
  <pre><code>/* GET root page. */
  router.get('/', function(req, res, next) {
    if(req.isAuthenticated()){
      return res.redirect('/home');
      next();
    } else {
      res.redirect('/login')
    }
  });
  
  router.get('/home_test', ensureAuthenticated, (req, res, next) =&gt; {
    User.find({ gender: 'female'}, (err, all) =&gt; {
      res.send(all)
    })
  })
  
  // GET home page.
  router.get('/home', ensureAuthenticated, (req, res, next) =&gt; {
    User.find({ gender: 'female'}, (err, all) =&gt; {
      res.render('home', {
        all: all
      })
    })
  })
  </code></pre>
  
  <p>The corresponding html file is just <code>&lt;div id="all-members"&gt;&lt;/div&gt;</code>.</p>
  
  <p>Can I mimic the server side response (where the data is loaded instantly in the client) using client-side JS?</p>