Nextjs: ComponentWillMount vs getInitialProps

Question

I'm using next.js for my React app because it has server side rendering. As I checked by log, both methods ComponentWillMount and getInitialProps both run on server side. So my question is: Are there any differences between those method ? When should I run in ComponentWillMount and when should I run in getInitialProps. I don't see Next.JS mentions about this thing.

Answer 1

GetInitialProps

1. GetInitialProps is a usually an async function which is good for
   asynchronous operations at the server and passes data to the page as props.

2. In nextJs it always runs at the server, if the page is called using Link then it is only called at the client side.

3. It can only be used in pages not in components.

ComponentWillMount

1. it is a lifecyle hook it is callled just before the render method is called .Data fetched in it cannot be passed in as a prop.

2. it can be called in component as well as in pages. it not a good place to make asynchronous call as it dont wait to async operation to complete. so if it runs at server and your async operation is written in it ..will not get completed and it comes to the client without getting data.

Answer 2

WARNING 50% of the accepted answer is wrong here's why, let me split my answer in 2 sections:

Part 1:

1. GetInitialProps is a usually an async function which is good for asynchronous operations at the server and passes data to the page as props.

2. In nextJs it always runs at the server, if the page is called using Link then it is only called at the client side

Wrong, GetInitialProps get executed on BOTH server and browser (remember the goal of Next.js is to make universal JavaScript), here is what the doc says:

With that, we can fetch data for a given page via a remote data source and pass it as props to our page. We can write our getInitialProps to work on both server and the client. So, Next.js can use it on both client and server.

Part 2:

Second section is to answer the actual question more accurately, it's clear that the OP got confused between ComponentDidMount and ComponentWillMount. because in the Next.js case it makes more sense to compare GetInitialProps VS ComponentDidMount as they both able to make Async call to fetch data, and they also both allow rendering afterwards ( which is not possible in the case of ComponentWillMount).

In any case you use one or another, there are few differences:

GetInitialProps: is provided by Next.js and it is NOT always triggered, so be careful with that, it happen when you wrap 1 component inside another. If the parent Component has GetInitialProps, the child's GetInitialProps will never be triggered, see this thread for more info.

ComponentDidMount: is React implementation and it's always triggered on the Browser.

You might ask, 'so when should I use this or that', actually it is very confusing and at the same time very simple, here is a rule of thumb:

• use GetInitialProps to fetch data when your component acts as a Page, and you want to provide the data as Props.
• use ComponentDidMount on children components ( that are not Pages ) or when you want to update the state upon Ajax call.

Answer 3

componentWillMount is the Component Lifecycle methods.

According to documentation

componentWillMount() is invoked immediately before mounting occurs. It is called before render(), therefore calling setState() synchronously in this method will not trigger an extra rendering. Generally, we recommend using the constructor() instead. Avoid introducing any side-effects or subscriptions in this method. For those use cases, use componentDidMount() instead. This is the only lifecycle hook called on server rendering.