I think many are using Next.js and missing this information from the doc: Your “getServerSideProps” shouldn’t be making network requests, it blocks the page from loading entirely which shows a blank page to your users.
Instead, your “getServerSideProps” should either read directly from your database to retrieve the data, or you should not use it at all and possibly prefer client side fetching where you can display an initial loading state or at least some UI while data is loading.
But Andrei, what if I need static rendering to have the best SEO?
Maybe the answer is “getStaticProps” with a smart revalidate logic?
Maybe Server Components will improve this? I don’t know.
I feel like the best of both worlds is having a solution server side rendered, with client side logic for maximum interactivity, but also with the ability to stream updates from the server like Elixir’s LiveView does (hooks on the server?)
Diverging Opinions
But, I found an interesting thread which is arguing for the following:
getInitialProps
is not deprecated.
- Use
getInitialProps
if the backend API service is decoupled from NextJS. - Use
getServerSideProps
if the backend data available in NextJS without any extra API roundtrip. Or avoid CORS by proxying it through NextJS backend.
When using getInitialProps
you need be careful because environment variables leak and you need to configure serverRuntimeConfig
and publicRuntimeConfig
carefully.