NextJS: getInitialProps method

Question

Working with NextJS and saw an example of a page:

class IndexPage extends Component {
  static async getInitialProps(context) {
    return {};
  }
  render() {
    return <div>hello world</div>;
  }
}
export default withRouter(IndexPage);

What exactly does the getInitialProps method in NextJS?

Answer 1

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

It can run both on the server and on the browser(if you use Link for example).

My conclusion would be to use getInitialProps to fetch data when your component acts as a Page, and you want to provide the data as Props.

Docs: https://nextjs.org/learn/basics/fetching-data-for-pages