I have a pretty simple React.js ponent which I need to make an isomorphic (rendered on the server). The problem is that ponent rendered with helpful information only after ajax request pletes, like that:

export default React.createClass({
  getInitialState() {
    return {}
  },

  ponentDidMount() {
    fetch("/users/").then(response => {
      this.setState(users: response.data)
    })
  },

  render() {
    if (this.state.users == undefined) {
      return <div />
    }

    return <div>{this.state.users.map(some_function)}</div>
  }
})

The problem is that it's pointless to return empty div to search engines. I want ajax request to be finished (even on the server) and render only after that. How can I achieve that?

I have a pretty simple React.js ponent which I need to make an isomorphic (rendered on the server). The problem is that ponent rendered with helpful information only after ajax request pletes, like that:

export default React.createClass({
  getInitialState() {
    return {}
  },

  ponentDidMount() {
    fetch("/users/").then(response => {
      this.setState(users: response.data)
    })
  },

  render() {
    if (this.state.users == undefined) {
      return <div />
    }

    return <div>{this.state.users.map(some_function)}</div>
  }
})

The problem is that it's pointless to return empty div to search engines. I want ajax request to be finished (even on the server) and render only after that. How can I achieve that?

• javascript
• ajax
• reactjs
• isomorphic-javascript

• I believe that you want to take the parent ponent and use props instead of state, letting the parent ponent decide whether to render it or not. – rdiz Commented Aug 1, 2016 at 9:36
• @Dencker Could you explain how to decide render it or not, please? – Alex Antonov Commented Aug 1, 2016 at 9:43

1 Answer 1

As touched on by @Dencker, you want to make the parent ponent decide when to render the child ponent, something like this would work:

// Parent
export default React.createClass({
  getInitialState() {
    return {
      usersLoaded: false
    }
  },

  ponentDidMount() {
    fetch("/users/").then(response => {
      this._users = response.users;
      this.setState({
        usersLoaded: true
      });
    })
  },

  render() {
    if ( this.state.usersLoaded ) {
      return (
        <ChildComponent users={this._users} />
      )
    } else {
      return null;
    }
  }
});

// Child
export default React.createClass({
  render() {
    return <div>{this.props.users.map(some_function)}</div>
  }
});

What I'm doing there is:

1. Setting an initial state on the parent ponent which is usersLoaded: false.
2. In the render function for that ponent, making sure I only render the child ponent when the parent's usersLoaded state is true.
3. parent ponent's ponentDidMount method is where the AJAX call takes place, and note I use a variable on the ponent to store the users, not the state object (states generally should only be used to store very simple values).
4. This is then passed down to the child ponent as a prop.

All of the above makes the child ponent far simpler as it will only now need a render method and no if/else check.