Loading data from a remote server using vanilla Next.js

Let's begin with a quick explanation of how data is usually loaded in traditional React apps.

If you don't use any data management frameworks, then your best bet is to request data when the component will mount, as shown here:

class Foo extends React.Component {

  state = {data: null};

  loadData = async () => await (await fetch('...')).json();

  async componentWillMount(){
    const data = await this.loadData();
    this.setState({data});
  }

  render(){
    if (!this.state.data) return (<div>Loading...</div>);
    return (<pre>{JSON.stringify(this.state.data)}</pre>);
  }

}

This will initiate the data loading process when the component is about to be mounted. Before the data is made available, it will show a loading indicator.

Unfortunately, this will not work in a server environment...