Correct way to fetch data with server side rendering (Next.js, when to use componentDidMount and when to use componentWillMount)

user_10688712 0
Viewed 2919

I am using Next.js, in the _app.js page (where we set a general webapp state) I have 2 types of data that I need to have in the header (so for every component).

1) The first type is the header info, this info should be rendered before the app loads. I will use get getInitialProps to call the endpoints and put them into the props and then to componentWillMount to add them to the state.

2) The second type is the data for the Search component, it as a lot of data and I don't particularly mind loading it while the app is already rendered as It is not displayed in the first user visual. So I am gussing that here it is much better prefered to use componentDidMount and asynchorslly call the endpoint that fetches the serach object data and than adding setting the state with it.

The purpose of this questionis double:

1) Review - Am I thinking about this correctly or did I miss something?

2) Question - now, when the data is loaded after first render, I am passing the data like so: _app.js -> Layout -> Menu -> SearchBar so my question is, in my searchBar I need to do something like

componentDidMount() {
    this.setState({ options: this.props.searchBarSource })
}

But, because _app.js is filling this data with an async call, wouldn't this mean that I will always get an empty object? WWhat is the correct way to solve this? If I setTimeOut to around 3 seconds and then set the data is it a normal solution or very hacky and there are better ways?

react-lifecycle server-side-rendering next.js reactjs
1 Answers

What your are trying to do makes sense. Coming to NextJS, you need to be very deliberate about which data should load server side and which shouldn't.

Here are some pointers:

  1. There is no need to setState in the search component, you can use this.props.searchBarSource as Kunukn mentioned.

    [Note - If you are combining getInitialProps and client side (shallow routing), when the user navigates to a new client side route, the initialProps will be undefined. A workaround might be to store initialProps in state or Local Storage.]

  2. The point of getInitialProps is to load async data before the component mounts. You will always receive the resolved Promise on componentDidMount, so your this.props.searchBarSource will never be empty (or more correctly, pending).

user_48221740
Related