NextJS: getInitialProps method

user_8059459 0
Viewed 14224

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?

next.js reactjs javascript
7 Answers

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

user_63344110

Notice that to load data when the page loads, we use getInitialProps which is an async static method. It can asynchronously fetch anything that resolves to a JavaScript plain Object, which populates props.

Data returned from getInitialProps is serialized when server rendering, similar to a JSON.stringify. Make sure the returned object from getInitialProps is a plain Object and not using Date, Map or Set.

For the initial page load, getInitialProps will execute on the server only. getInitialProps will only be executed on the client when navigating to a different route via the Link component or using the routing APIs.

Note: getInitialProps can not be used in children components. Only in pages.

user_73793940

getInitialProps

  • is used to asynchronously fetch some data, which then populates props.
  • For the initial page load, getInitialProps will execute on the server only.
  • will only be executed on the client when navigating to a different route via the next/link component or by using next/router.
  • can not be used in children components, only in the default export of every page.

If you're using Next.js 9.3 or newer, it is recommended that you use getStaticProps or getServerSideProps instead of getInitialProps.

These new data fetching methods allow you to have a granular choice between static generation and server-side rendering.

Source: https://nextjs.org/docs/api-reference/data-fetching/getInitialProps

user_29824650

Motivation for using getInitialProps:

All of these answers are correct, but I would like to add that NextJS does server-side rendering. Which means that if you want to fetch data before showing the user something you can't use componentDidMount (because that happens after rendering).

So you need to use getInitialProps because it is executed first, and after that NextJS is rendering the page. Then NextJS takes the component's HTML that is produced and sends it to the browser.

user_92201220

"getIntialProps" is usually used to fetch data from server. It runs on server and client both but with one basic difference ie: to make it work on client side the route has to be hit either from "router.push(/routename)" or by next js 'Link ' component.

All this data can be returned to component in from of props.

Note: "getIntialProps" does not have access to application props.

user_81931820

getInitialProps is used when you would like your page to request data on server-side instead of client-side, it allows to take advantage of SEO.

user_105193730

I will try my best to explain this question:

First you have to ask yourself what is server-side rendering and why we need server-side rendering ?

server-side-rendering in React mean the data is rendering from the server not the client, its important to note that ReactJs (not NextJS) always renders anything in browser not server.

So when user fill the address in browser address bar, the request from browser get sent to server, and information pass between server to client in React (not next) just a bunch of javascript and a div tag (width id="app" most of the time), and that is a problem with SEO.

Because there are not much information for search engine crawler (Google) to parse (it will ask itself, reall ? a signle div tag with a bunch of JS ? really ? what the heck is this ?? naaahh I am tired of this I will go index the other page and leave this page next time... so on), and search engine feel difficult to understand the content of that site, mean it is NOT optimized for search engine (rememeber SEO = search engine optimization).

So that is why we need to render the data from the server so that it will make search engine crawler feel comfortable to parse the information of the site for sure.

And to render data from the server in NextJs we need to pass props from getIntitialProps. This getIntitialProps is where we will render the data (for example, a lits of product, the name of product, the price...) from server side.

user_34912980
Related