Let’s start with a small explanation of how Next.js works with
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/router, it runs on the client.
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.