Why is getInitialProps deprecated?

[timmysmalls]

Hey guys, I'm very new to NextJS, but I'm building my first site/app with it right now, learning the ropes. Love everything so far. One thing I noticed is that in the docs for getInitialProps it recommends me to use getStaticProps or getServerSideProps instead. For what I understand getStaticProps is static rendering, running only at build time, a la GatsbyJS, and getServerSideProps does essentially the same thing, but executing at runtime instead, so on every request. Both run exclusively on the server though. getInitialProps runs either server-side, or client-side, depending on where the navigation took place. It seems that neither getStaticProps, or getServerSideProps is a real replacement for getInitialProps in that regard. I have now implemented my routes with getServerSideProps. but I notice a delay in clicking a link and the page rendering when I navigate client-side with this setup. Rather than seeing the skeleton of the page with a spinner while any requests are executed it just seems to wait until the server is finished creating my page before showing any feedback of the click. It would seems that in this situation getInitialProps would still be more suitable, because it will run server side if it's the first page being rendered, or client side in case of clicking a link within your app. This way I can show a spinner if it's not done loading yet. Or am I missing something entirely, where getServerSideProps can serve a skeleton page just like you would with client side navigation?

Thanks in advance!

[rafaelalmeidatk]

Hi, welcome! getInitialProps runs both on the client and server side, this caused some confusion and required extra work to make sure unnecessary code wouldn't be bundled to the client.

With the new data-fetching methods, Next.js can easily detected server-side code and remove it from the client-side bundle, check this tool: https://next-code-elimination.now.sh
The new separated methods are also important to signalize if the page should be static or server generated.

I have now implemented my routes with getServerSideProps. but I notice a delay in clicking a link and the page rendering when I navigate client-side with this setup.

Next.js won't render the new page until the response from gSSP is returned, but this is the same behavior of getInitialProps too. If you make requests in gIP the page won't navigate until they are completed. You can enhance the UX with patterns like client-side loading.

[Vadorequest]

It's not deprecated, but it's harder to manage, especially for beginners, there are more edge cases to be careful at.

[timneutkens]

Instead, getinitialprops doesnt ask me to serialize anything.

And silently makes your app break in certain behaviors. This was fixed with getServerSideProps and getStaticProps.

The error is there for a reason and should be fixed. Can you post your code + the exact message? Maybe we can improve pinpointing the message in a better way.

[danilockthar]

If you recommend to leave behind getinitialprops i will ! 👍 With getStaticProps and getStaticPaths i have not problem.
You want me to post the code here or make a new discussion post ?

[timneutkens]

Both are fine! New discussion is probably better 👍

[srikanth912]

@timneutkens, sorry to hijack this thread but can you confirm if it is indeed deprecated and will be removed in near future (2020)? (I'm not seeing deprecation warnings when I start the server with npm run dev

[timneutkens]

getInitialProps is not deprecated, getStaticProps and getServerSideProps give a better model to reason about and are easier in use though.