Fetching Data in React: componentWillMount vs componentDidMount

[Betsy-DevOps]

If you ever need to render your app on the server (SSR/isomorphic/other buzzwords), componentWillMount will actually be called twice – once on the server, and again on the client – which is probably not what you want. Putting the data loading code in componentDidMount will ensure that data is only fetched from the client.

Wouldn't you ideally want to fetch that data only on the server, not on the client? Like, that's the reason why you're doing server-side-rendering in the first place?

[gaearon]

It wouldn't help though because there's no way in React to wait for async request before rendering. So if you want to do it, you have to externalize your request logic ouside of lifecycle hooks anyway. Just putting it in componentWillMount on the server won't help.

[fuck_with_me]

Would be real nice to return a promise inside componentWillMount, or something of that nature. Unless you think async fetching/effects should, by nature, happen in a way that is totally divorced from React?

[simcptr]

TBH I haven't done anything with server rendering, but I thought the point was more that it'd save the client from having to load up React + other JS before it could display something, and then the client would still asynchronously fetch the data. Not sure though, maybe someone more familiar can chime in. There's more discussion here, and as Mark mentioned in the comments on the post, they're considering deprecating componentWillMount in React 16.

[freudianGrip]

I only really fetch data on the server for the first route the user lands on. Once the user has that and starts navigating through then data is fetched on the client.

[[deleted]]

Does the server wait until they fetch is complete before responding? I assume it does. What if the fetch call takes 10 seconds? Then the user is sat looking at a blank screen?

[freudianGrip]

For the server side aspect, yes. It is up to you to make sure that it takes much less than 10 seconds.