4

I want to receive data via a REST service call in my React Universal (with Next.js) app using fetch() and then render the result into JSX like this:

class VideoPage extends Component {
  componentWillMount() {
    console.log('componentWillMount');

    fetch(path, {
      method: 'get',
    })
      .then(response =>
        response.json().then(data => {
          this.setState({
            video: data,
          });
          console.log('received');
        })
      );
  }

  render() {
    console.log('render');
    console.log(this.state);
    if (this.state && this.state.video) {
      return (
        <div>
          {this.state.video.title}
        </div>
      );
    }
  }
}

export default VideoPage;

Unfortunately, the output is this:

componentWillMount
render
null
received

Which does make sense because the call to fetch is asynchronously and render() finishes before the call to the REST service has finished.

In a client-side app this would be no problem because a change of state would call render() which then updates the view, but in a universal app, especially with JavaScript turned off on the client, this is not possible.

How can I solve this?

Is there a way to call the server synchronously or delay render()?

4

2 に答える 2