Add support for getStaticProps and getServerSideProps

[laugharn]

Feature request

Full support for the Next 9.3 getStaticProps/getServerSideProps page functions

Is your feature request related to a problem? Please describe.

I recently started deploying a site using next-on-netlify (thank you so much for this plugin, you have saved my team a ton of heartache) and would like to take advantage of getStaticProps, so we can statically generate some content from our CMS at build time.

As you can see above, the resources aren't getting generated for the new page types. The pages still load, and has the data generated with SSR, but it's generating the page on demand and not statically at build.

Describe the solution you'd like

Generate pages with getStaticProps as static. Would be happy to help, but am not sure where to start looking.

Describe alternatives you've considered

Accept the outcome but remove the 404 errors by using getInitialProps instead

[FinnWoelm]

Hey @laugharn,

Thank you for taking the time to file an issue!

I'm going to look into this in the coming days. I had a busy week, so I haven't been able to do so just yet. I'll get back to you soon — hopefully with some insights 😁

---

PS: I'm going to tag #1 and @Yagogc who had a related issue, I think:

I'm having issues with next-on-netlify by getting query params from getServerSideProps.

We didn't find a solution in that thread, I'm just tagging it for future reference.

[FinnWoelm]

Hey @laugharn,

Happy to report that next-on-netlify will very soon support getStaticProps and getServerSideProps!

The code is already committed to the wip-version2 branch. Feel free to check it out! If you do, make sure to have a look at the changes you need to make to your Netlify configuration. Implementation details for GSP and GSSP are below (for reference).

I'm hoping to merge it into master later today and finally publish next-on-netlify v2 🎉 🤞

Cheers,
Finn

Reference:

For pages with getStaticProps, it supports:

• pages with static routing:
  • the page will be pre-rendered
  • when requesting the page, it will be delivered by CDN
  • when navigating to the page on the client-side (using Next <Link>), the page's JSON data will be fetched and delivered by CDN
• pages with dynamic routing and pre-defined paths in getStaticPaths and fallback: false
  • the pages for the defined paths will be pre-rendered
  • when requesting one of those page, it will be delivered by CDN
  • when navigating to one of those page on the client-side (using Next <Link>), the page's JSON data will be fetched and delivered by CDN
  • when requesting a path that was not pre-defined in getStaticPaths, you get a 404
• pages with dynamic routing and pre-defined paths in getStaticPaths and fallback: true
  • the pages for the defined paths will be pre-rendered
  • when requesting one of those page, it will be delivered by CDN
  • when navigating to one of those page on the client-side (using Next <Link>), the page's JSON data will be fetched and delivered by CDN
  • when requesting a path that was not pre-defined in getStaticPaths, the page is SSR-ed. This is different from NextJS, where the page is not SSR-ed. On NextJS, a fallback version of the page is shown on first request. Then the data is loaded on the client. At the same time, NextJS also makes that page's rendered HTML available via CDN for future requests. We cannot do that with Netlify, because we cannot upload assets to the CDN at run-time. So I'm diverging a bit from NextJS here and just SSR-ing all non-defined paths.
  • when navigating to a non-pre-defined path on the client-side (using Next <Link>), the page's JSON data will be fetched and delivered by a Netlify Function (the same function that takes care of SSRing the page)

For pages with getServerSideProps with static or dynamic routing:

• when requesting a page, it is always SSR'ed
• when navigating to a page on the client-side (using Next <Link>), the page's JSON data will be fetched and delivered by a Netlify Function (the same function that takes care of SSRing the page)

[laugharn]

Working great on our test builds. Cannot thank you enough for this one!

[FinnWoelm]

Hey @laugharn,

Thank you for testing! 😁

next-on-netlify v2 is finally out 🎉 🎉 You can see the full list of changes in the changelog.

Thank you for your support and beta testing! Don't forget to switch back to next-on-netlify in your package.json :)

Let me know if you run into any trouble. And if you end up building something awesome, let me know, too! I'd love to feature some real-world projects in the README.

Happy hacking! 🔥
Finn

[FinnWoelm]

PS: I'm going to close this issue for now. But feel free to reopen any time or file a new issue, when something new comes up!! :)

[wpmonty]

we cannot upload assets to the CDN at run-time

Are there any plans to change the Fallback behavior and cache the results of SSR?