React fetch data in server before render

Question

I'm new to reactjs, I want to fetch data in server, so that it will send page with data to client.

It is OK when the function getDefaultProps return dummy data like this {data: {books: [{..}, {..}]}}.

However not work with code below. The code execute in this sequence with error message "Cannot read property 'books' of undefined"

getDefaultProps
return
fetch
{data: {books: [{..}, {..}]}}

However, I expect the code should run in this sequence

getDefaultProps
fetch
{data: {books: [{..}, {..}]}}
return

Any Idea?

statics: {
    fetchData: function(callback) {
      var me = this;

      superagent.get('http://localhost:3100/api/books')
        .accept('json')
        .end(function(err, res){
          if (err) throw err;

          var data = {data: {books: res.body} }

          console.log('fetch');                  
          callback(data);  
        });
    }


getDefaultProps: function() {
    console.log('getDefaultProps');
    var me = this;
    me.data = '';

    this.fetchData(function(data){
        console.log('callback');
        console.log(data);
        me.data = data;      
      });

    console.log('return');
    return me.data;            
  },


  render: function() {
    console.log('render book-list');
    return (
      <div>
        <ul>
        {
          this.props.data.books.map(function(book) {
            return <li key={book.name}>{book.name}</li>
          })
        }
        </ul>
      </div>
    );
  }

Michael Parker · Accepted Answer · 2015-06-19 13:54:35Z

29

What you're looking for is componentWillMount.

From the documentation:

Invoked once, both on the client and server, immediately before the initial rendering occurs. If you call setState within this method, render() will see the updated state and will be executed only once despite the state change.

So you would do something like this:

componentWillMount : function () {
    var data = this.getData();
    this.setState({data : data});
},

This way, render() will only be called once, and you'll have the data you're looking for in the initial render.

answered Jun 19, 2015 at 13:54

Michael Parker

13k7 gold badges42 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

nav Over a year ago

...but if getData fires a async request?

Michael Parker Over a year ago

@nav For async requests, you're going to have to set some initial state that indicates to the user that data is being fetched (perhaps a loading icon). You can still perform the fetch in componentWillMount, and when the data is retrieved, you can set that state again to indicate that the data is finished loading, and display it to the user.

nav Over a year ago

Yes, but then the data is fetched on the client and not the server. Isn't the OP asking to save this roundtrip if what is being requested is being rendered on the server and the async request is hitting that same server surely its better to process this all BEFORE sending the response down to the client?

Nick Lucas Over a year ago

@nav you can fire this request synchronously by using await this.getData()

Ivan Salo Over a year ago

@MichaelParker componentWillMount is deprecated. Do you have any other alternatives?

Mahdi Bashirpour · Accepted Answer · 2018-05-27 11:00:55Z

A very simple example of this

import React, { Component } from 'react';
import { View, Text } from 'react-native';

export default class App extends React.Component  {

    constructor(props) {
      super(props);

      this.state = {
        data : null
      };
    }

    componentWillMount() {
        this.renderMyData();
    }

    renderMyData(){
        fetch('https://your url')
            .then((response) => response.json())
            .then((responseJson) => {
              this.setState({ data : responseJson })
            })
            .catch((error) => {
              console.error(error);
            });
    }

    render(){
        return(
            <View>
                {this.state.data ? <MyComponent data={this.state.data} /> : <MyLoadingComponnents /> }
            </View>
        );
    }
}

Asmaa Almadhoun · Accepted Answer · 2017-07-23 09:47:41Z

The best answer I use to receive data from server and display it

 constructor(props){
            super(props);
            this.state = {
                items2 : [{}],
                isLoading: true
            }

        }

componentWillMount (){
 axios({
            method: 'get',
            responseType: 'json',
            url: '....',

        })
            .then(response => {
                self.setState({
                    items2: response ,
                    isLoading: false
                });
                console.log("Asmaa Almadhoun *** : " + self.state.items2);
            })
            .catch(error => {
                console.log("Error *** : " + error);
            });
    })}



    render() {
       return(
       { this.state.isLoading &&
                    <i className="fa fa-spinner fa-spin"></i>

                }
                { !this.state.isLoading &&
            //external component passing Server data to its classes
                     <TestDynamic  items={this.state.items2}/> 
                }
         ) }

hkal · Accepted Answer · 2015-06-19 04:32:56Z

6

In React, props are used for component parameters not for handling data. There is a separate construct for that called state. Whenever you update state the component basically re-renders itself according to the new values.

var BookList = React.createClass({
  // Fetches the book list from the server
  getBookList: function() {
    superagent.get('http://localhost:3100/api/books')
      .accept('json')
      .end(function(err, res) {
        if (err) throw err;

        this.setBookListState(res);
      });
  },
  // Custom function we'll use to update the component state
  setBookListState: function(books) {
    this.setState({
      books: books.data
    });
  },
  // React exposes this function to allow you to set the default state
  // of your component
  getInitialState: function() {
    return {
      books: []
    };
  },
  // React exposes this function, which you can think of as the
  // constructor of your component. Call for your data here.
  componentDidMount: function() {
    this.getBookList();
  },
  render: function() {
    var books = this.state.books.map(function(book) {
      return (
        <li key={book.key}>{book.name}</li>
      );
    });

    return (
      <div>
        <ul>
          {books}
        </ul>
      </div>
    );
  }
});

answered Jun 19, 2015 at 4:32

hkal

612 bronze badges

2 Comments

fingercross Over a year ago

em... but as I know that data can be fetch and ready before render. your example will render twice. first render (with empty props) > fetch data and setState > render again with state. Correct me if I'm wrong

hkal Over a year ago

You are right, the component will render twice. Making ajax calls is asynchronous, which was the issue with the original code. The only way you're getting the data before render is called is if you have a parent component that is in charge of data fetching and mounting BookList. Even in then, you will have to update the state of that component which will call render twice.

Hugh · Accepted Answer · 2017-03-29 06:46:37Z

1

As a supplement of the answer of Michael Parker, you can make getData accept a callback function to active the setState update the data:

componentWillMount : function () {
    var data = this.getData(()=>this.setState({data : data}));
},

answered Mar 29, 2017 at 6:46

Hugh

531 silver badge6 bronze badges

Comments

Rostislav Matl · Accepted Answer · 2020-05-10 10:05:21Z

1

I've just stumbled upon this problem too, learning React, and solved it by showing spinner until the data is ready.

    render() {
    if (this.state.data === null) {
        return (
            <div className="MyView">
                <Spinner/>
            </div>
        );
    }
    else {
        return(
            <div className="MyView">
                <ReactJson src={this.state.data}/>
            </div>
        );
    }
}

answered May 10, 2020 at 10:05

Rostislav Matl

4,5934 gold badges32 silver badges55 bronze badges

1 Comment

Luke Over a year ago

You can check if the state is falsy instead of null, so it could be cleaner to use if (!this.state.data) {

Sergio Holgado · Accepted Answer · 2023-07-02 15:42:20Z

1

If you are using class based react components, then fetch the data inside the componentWillMount() method, if you are using functional components use the useeffect hook, everything inside it will load before mount and everything inside the return statement will mount afterwards.

using useEffect hook:

import React, { useEffect, useState } from 'react';

function MyComponent() {
  const [data, setData] = useState([]);

  useEffect(() => {
    fetchData();
  }, []);

  const fetchData = async () => {
    try {
      const response = await fetch('your-api-endpoint');
      const result = await response.json();
      setData(result);
    } catch (error) {
      console.error('Error fetching data:', error);
    }
  };

  // Render the component using the fetched data
  return <div>{/* Render your component with the fetched data */}</div>;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.0/umd/react-dom.production.min.js"></script>

using componentDidMount():

import React from 'react';

class MyComponent extends React.Component {
  state = {
    data: [],
  };

  async componentDidMount() {
    try {
      const response = await fetch('your-api-endpoint');
      const result = await response.json();
      this.setState({ data: result });
    } catch (error) {
      console.error('Error fetching data:', error);
    }
  }

  // Render the component using the fetched data
  render() {
    return <div>{/* Render your component with the fetched data */}</div>;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.5.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.5.2/umd/react-dom.production.min.js"></script>

edited Jul 2, 2023 at 15:42

answered Jul 2, 2023 at 10:24

Sergio Holgado

334 bronze badges

1 Comment

Scott Cornwell Over a year ago

This is incorrect, useEffect works like this: useEffect(() => { // this runs after render return () => { // this runs after unmount } }) There is no way to load data before render with useEffect. The only way to do that with hooks is to do it in the actual render body, and store a value with useRef to know if you've already mounted or not. If you put this at the beginning of your arrow function component it will start loading at the beginning of the render instead of after. I'm sorry it's formatted so horribly, Stackoverflow won't let me add paragraphs or code blocks.

Community · Accepted Answer · 2017-05-23 12:26:10Z

0

Responded to a similar question with a potentially simple solution to this if anyone is still after an answer, the catch is it involves the use of redux-sagas:

https://stackoverflow.com/a/38701184/978306

Or just skip straight to the article I wrote on the topic:

https://medium.com/@navgarcha7891/react-server-side-rendering-with-simple-redux-store-hydration-9f77ab66900a

edited May 23, 2017 at 12:26

CommunityBot

11 silver badge

answered Aug 1, 2016 at 16:57

nav

3,1151 gold badge23 silver badges24 bronze badges

Comments

Sergey Andreev · Accepted Answer · 2019-02-12 08:35:36Z

0

You can use redial package for prefetching data on the server before attempting to render

answered Feb 12, 2019 at 8:35

Sergey Andreev

1,4983 gold badges17 silver badges28 bronze badges

Comments

Илья Апрол · Accepted Answer · 2021-08-20 19:44:58Z

0

Try using componentDidMount:

componentDidMount : function () {
    // Your code goes here
},

1 Comment

Eugene Over a year ago

The question was about making a request before a first render. But both componentDidMount and useEffect will be called after initial render

Collectives™ on Stack Overflow

React fetch data in server before render

10 Answers 10

5 Comments

Comments

Comments

2 Comments

Comments

1 Comment

1 Comment

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

10 Answers 10

5 Comments

Comments

Comments

2 Comments

Comments

1 Comment

1 Comment

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related