Next.js: ComponentWillMount vs. getInitialProps

Question

I'm using Next.js for my React application because it has server side rendering. As I checked by log, both methods ComponentWillMount and getInitialProps both run on the server side. Are there any differences between those methods?

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

WARNING

50% of the accepted answer is wrong. Here's why. Let me split my answer in two sections:

Part 1:

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

2. In Next.js 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 the server and browser (remember the goal of Next.js is to make universal JavaScript). Here is what the documentation 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:

The 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 a few differences:

GetInitialProps: is provided by Next.js and it is not always triggered, so be careful with that. It happens when you wrap one component inside another. If the parent component has GetInitialProps, the child's GetInitialProps will never be triggered. See this thread for more information.

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 an Ajax call.

Answer 2

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 Next.js 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 called just before the render method is called. Data fetched in it cannot be passed in as a prop.

2. It can be called in a component as well as in pages. It is not a good place to make asynchronous calls as it doesn't wait for the async operation to complete. So if it runs at the server and your async operation is written in it, it will not get completed and it comes to the client without getting data.

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.