How to send ajax inside componentWillMount, $ is undefined - reactjs

Question

I am using the server side rendering to the app, I want to load some data through the API before the page renders the at server side.
As I found the componentWillMount is called before rendering both server side and client side, but it doesn't executing the ajax code. Says $ is undefined,
Please anyone tell me what is the way to load the data before rendering the page.

Answer 1

This will be a generic answer because of the lack of details in the question. But I hope it sheds some light on the subject.
Based on my personal experience, if you're server rendering react you better have a "Controller" out-most component, that would deal with the whole state and everything beneath it should be mostly controlled or not depend on Ajax to load data at all. If you're using Redux, for instance, this "controller" component would be the Provider. This is because it's much easier for 1 component to deal with server vs. client than all of them.
Now, the outer "controller" component should know whether or not it's on the server and load data differently accordingly. One way to do that is to check if "window" is defined. That is: If you're on the server, don't use Ajax al all to load the initial state.. But if you are on the client, then use Ajax.
Now you have one last problem. When you do server rendering, you don't want the client to round-trip to the server to get the same data it already has. In order to prevent that, render a script block to be executed on the client, that contains the initial state and DO NOT do the Ajax if this variable is set. Like this:
<script>
window._serverState = {...}
</script>
Another thing.. I personally don't use $ for Ajax I don't think React and jQuery should be used together. Check out Axios.

Answer 2

Generally It is not advisable to make ajax call in componentWillMount. Because just after the componentWillMount rendering happens so rendering has to wait till the ajax call gets completed and gets new data.
It's better to get the rendering done for the first time with empty state data lets say
data:[]
and make ajax call in componentDidMount, this is the place where you can perform dom manipulation and send ajax request.
componentDidMount() {
sendAjaxRequest()
.then(
(newDataFromServer) => {
this.setState({data : newDataFromServer });
});
}
After new data is fetched from server set the state with new data
this.setState({data:newDataFromServer});
This will cause the re-rendering to happen with latest data fetched from server and new state changes will be reflected.