Intermediate JavaScript: Building Frontend Components/

...

/

Client Side Hydration

Client Side Hydration

When the user first loads the page, we need to show some list items right away. We'll learn how to in this lesson!

We'll cover the following...

Server side #

We first want to get to a point where we have our initial set of data. As soon as the window loads, let’s pull data from the server and display ​it as a series of tweets.

To know if we’ve succeeded, the server should have some data.

We’ll write a short script to do so:

Press + to interact
function loadTestData() {
  const sampleData = [];
  const sampleDataSize = 20;
  for (let i = 0; i < sampleDataSize; i++) {
    const message = getRandomString({
      length: getRandomInteger({min: 10, max: 150}),
      includeSpaces: true
    });
    const firstName = getRandomString({
      length: getRandomInteger({min: 3, max: 7}),
      includeSpaces: false
    });
    const lastName = getRandomString({
      length: getRandomInteger({min: 3, max: 7}),
      includeSpaces: false
    });
    const handle = '@' + getRandomString({
      length: getRandomInteger({min: 4, max: 8}),
      includeSpaces: false
    });
    sampleData.push({
      tweet: {
        name: `${firstName} ${lastName}`,
        message, handle
      }
    });
  }
  for (const data of sampleData) {
    // Do nothing with result
    api.post(HOST + 'tweets', data, () => {});
  }
}

Hopefully, this gives a good set of data. I’ve changed the getRandomString function slightly to include spaces only if specified​, ...