Search⌘ K
Home
Courses
Intermediate JavaScript: Building Frontend Components

Client Side Hydration

Explore how to implement client side hydration to dynamically fetch and render data for an infinite scrolling list. Learn the process of using JavaScript templates to populate HTML, server-side data handling, and styling fixes for long content within real-world frontend components.

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:

Javascript (babel-node)
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​, since we don’t want ...