Update examples with getInitialProps to SSG

[lfades]

With the release of Next.js 9.3 we are empowering all Next.js applications to take advantage of the JAMStack, before this, around half of our examples were using getInitialProps for data fetching in pages, and even though we are not removing it any time soon, it's not ideal for most applications. You can read more about this here.

Around half of our examples (110+) are using getInitialProps. and in most of those examples it can be replaced with getStaticProps to take advantage of SSG.

Any updates to take advantage of SSG in current examples using getInitialProps are deeply welcome and will be merged ASAP

PRs for New examples using getStaticProps / getStaticPaths and removal of current examples that are very outdated or not worth upgrading are also very welcome.

Here are some of the examples currently using getInitialProps:

https://github.com/zeit/next.js/tree/canary/examples/amp-first
https://github.com/zeit/next.js/tree/canary/examples/analyze-bundles
https://github.com/zeit/next.js/tree/canary/examples/api-routes
https://github.com/zeit/next.js/tree/canary/examples/auth0
https://github.com/zeit/next.js/tree/canary/examples/blog-starter
https://github.com/zeit/next.js/tree/canary/examples/custom-server-express
https://github.com/zeit/next.js/tree/canary/examples/data-fetch
https://github.com/zeit/next.js/tree/canary/examples/ssr-caching
https://github.com/zeit/next.js/tree/canary/examples/using-router

To find more examples, do a global search inside our examples for getInitialProps, and with the exception of pages/_document.js any other result is one that we don't want!

If an example can only work with getInitialProps, updating it to use getServerSideProps is also welcome.

Update: Please create a PR per example update, this will speed up the review and merge process 🙏

[samao]

This new feature doesn't seem to work with saga and redux now

[timneutkens]

Updated a bunch of examples in this PR: #11136

[Albert-Gao]

Thanks for the clarification. @lfades

Sorry for the misleading. I meant the original example only doing a getInitialProps at the top level but not at the page level or component level, and it only does getInitialProps if you enable ssr mode.

But your answer makes me think I might misunderstand something here. So, sorry for the noob question, let's say in a typical SaaS case, there is a page, and for each client, the page needs different data.

My question is:

In this case, isn't getInitialProps faster than getStaticProps in terms of the performance?

because getInitialProps just generates things on the fly, which is how SSR works without physically generates something that will be invalidated for a different tenant.

Thanks 😄

[lfades]

@Albert-Gao

In this case, isn't getInitialProps faster than getStaticProps in terms of the performance?

TL;DR: Never.

If a page uses data based on the user, you should do client side rendering with loading states, the typical case is for the page to be pretty much the same, but the data is different, so you output static HTML for the layout, and then make a request and show the data once it's ready. This is usually how pages like Twitter, vercel.com and more do it. It's better to show the client something very fast, and then make a request and let them wait with content (even if it's a loding spinner), that to make then wait in a blank page for a serverless function to return the initial HTML.

With SSG and without getInitialProps / getServerSideProps you always get static content, you never have to wait for something to "generate things on the fly" because it's already generated.

I hope that answers your question, if it's still not clear, go to our Discussions tab, there are multiple conversations about this 👍

[Albert-Gao]

Thanks so much for the clarification!

so you output static HTML for the layout, and then make a request and show the data once it's ready. This is usually how pages like Twitter, vercel.com and more do it.

I will check the discussion tab!

[armouti]

@lfades
Thanks for your explanation.
Just to clarify, does that mean with ssg you can load initial HTML (a loading skeleton for example) and then run it on the client like an SPA where you populate data with something like useSWR ?
Or are the content of an ssg page fixed ?

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.