Why I Got Rid of getInitialProps in My Next.js Project

Pavel Mineev — Tue, 16 Mar 2021 08:21:57 +0000

Let’s start with a small explanation of how Next.js works with getInitialProps.
In Next.js, getInitialProps enables server-side rendering and can't be statically optimized. It runs every time we open a page. If a page is requested directly by a URL, it runs on the server. On the other hand, if we open a page through a link or UI element that uses next/link or next/router, it runs on the client.

Is getInitialProps That Bad?

It renders a page on the server-side

Sometimes we need to render static pages with data from the server. getInitialProps is the worst method for that. In this case, you lose static optimization. You had your static HTML page. Now you have a server-side rendered page. It’s not bad when you need to update pages dynamically for different users, but it’s much worse when it’s just a page with data that could be updated sometimes. You could have your server send static HTML with no processing and no additional time.

Fetch Shared Data in Next.js With Single Request

Pavel Mineev — Sat, 06 Mar 2021 00:03:05 +0000

Take a look at caching strategies with NodeJS layer in front of Next.js

While reviewing my current project’s build process, I noticed that generating pages with getStaticProps yields many requests to one endpoint. It’s not a big problem in my case since our backend is quite fast but googling this issue showed that some people are struggling with it. For example, the issue might be serious in case of a slow database or when the backend can’t cope with 100 requests per second. So I decided to try solving this problem and improving the build time of my project.

DEV Community: Pavel Mineev

Why I Got Rid of getInitialProps in My Next.js Project

Is getInitialProps That Bad?

It renders a page on the server-side

Fetch Shared Data in Next.js With Single Request