HTTP requests are issued twice - once on the server and again upon client rendering - causes flickering effect

[jhades]

I just noticed the following on a clean installation of the starter using preview 0.84.0.

The data coming from an HTTP request gets rendered on the server side, and is visible on the HTML initially sent.

The problem is, once the page finishes to load the ajax request is issued again, and the part of the screen containing HTTP data is re-rendered. This causes a flickering effect, where the data is displayed, erased and then re-rendered.

This is not visible on the current version of the starter, because there is a small amount of data. But by throwing a bit some more data, the flickering becomes apparent:

// Our API for demos only
app.get('/data.json', (req, res) => {
  res.json([
      {
          "teamId": 1610612737,
          "abbreviation": "ATL",
          "teamName": "Atlanta Hawks",
          "simpleName": "Hawks",
          "location": "Atlanta"
      },
      {
          "teamId": 1610612738,
          "abbreviation": "BOS",
          "teamName": "Boston Celtics",
          "simpleName": "Celtics",
          "location": "Boston"
      },
      {
          "teamId": 1610612751,
          "abbreviation": "BKN",
          "teamName": "Brooklyn Nets",
          "simpleName": "Nets",
          "location": "Brooklyn"
      },
      {
          "teamId": 1610612766,
          "abbreviation": "CHA",
          "teamName": "Charlotte Hornets",
          "simpleName": "Hornets",
          "location": "Charlotte"
      },
      {
          "teamId": 1610612741,
          "abbreviation": "CHI",
          "teamName": "Chicago Bulls",
          "simpleName": "Bulls",
          "location": "Chicago"
      },
      {
          "teamId": 1610612739,
          "abbreviation": "CLE",
          "teamName": "Cleveland Cavaliers",
          "simpleName": "Cavaliers",
          "location": "Cleveland"
      },
      {
          "teamId": 1610612742,
          "abbreviation": "DAL",
          "teamName": "Dallas Mavericks",
          "simpleName": "Mavericks",
          "location": "Dallas"
      }
  ]);
});

[PatrickJS]

thanks, I created an issue in the universal repo angular/universal#338

[jeffwhelpley]

This is a dupe of #61.

[jeffwhelpley]

Dupe of #139. Follow issue there.

[diegogvieira]

jeffwhelpley I think you need to organize these issues... I keep seeing you opening and closing issues related to this